Assuming that your text of -
Lorem ipsum span sit amet, <a data-link="xxx">consectetur</a> adipiscing elit. Sed span velit, vestibulum vel <a data-link="yyy">pellentesque</a> sed, mattis et span. Morbi justo est, pharetra vitae nisl at, <a data-link="zzz">aliquet</a> consequat sapien
was in a paragraph element, you can try the following code -
1. Give your p element an id and add your text inside the element -
<p id="change_MySpan">
Lorem ipsum span sit amet,
<span data-link="xxx">consectetur</span>
adipiscing elit. Sed span velit, vestibulum vel
<span data-link="yyy">pellentesque</span>
sed, mattis et span. Morbi justo est, pharetra vitae nisl at,
<span data-link="zzz">aliquet</span>
consequat sapien
</p>
Add a javascript tag and run the following code -
<script>
const textElement = document.getElementById('change_MySpan');
const textContent = textElement.innerHTML;
if (textContent.includes('<span')) {
const linkContent = textContent.replace(/<span([^>]*)>.*?<\/span>/g, '<a$1>$&</a>');
const linkElement = document.createElement('div');
linkElement.innerHTML = linkContent;
textElement.parentNode.replaceChild(linkElement, textElement);
}
</script>
The script basically checks all of the text that has the "<" and span part, identifies it as a span element and then change it to an a link element.
If you run this code, the following is returned in your browser -
Lorem ipsum span sit amet, consectetur adipiscing elit. Sed span velit, vestibulum vel pellentesque sed, mattis et span. Morbi justo est, pharetra vitae nisl at, aliquet consequat sapien
All of your non-element span words is still returned as required.
When you right click and inspect the text, you will notice that you now have 3 a elements with data link xxx, yyy, zzz