Click here to Skip to main content
15,868,142 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
I have the following HTML text:
HTML
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...

So the text contains the html tag "span", but also the word "span".

I need to replace the html tag "span" with the html tag "a", but not the word "span", this way:
HTML
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...

How can I accomplish this?

What I have tried:

I've tried
JavaScript
text.innerHTML = text.innerHTML.replace(/\bspan\b/g, "a");

but it replaces the word "span", too.
Posted
Updated 13-Feb-23 23:52pm
Comments
Member 15627495 14-Feb-23 5:43am    
- pick the tag you want to change in a 'temp' var.
- create the new tag 'a' with all attributes and values.
- replace 'temp' by 'a'.

mind the 'selector' to have one only tag when pick it.

or change the pattern of your regexp with full spelling
<span are the pattern to search ( not only the letters 'span' )


text.innerHTML = text.innerHTML.replace(/\b<span\b/g, "a");
text.innerHTML = text.innerHTML.replace(/\b</span\b/g, "/a");

You could try:
content.replaceAll(/<(\/)?span([^>]*)>/g, '<$1a$2>');

This should cover most bases, though it's worth noting that dealing with HTML elements can be quite tricky. If somebody forgets to close an element then the matching might not work. It may be better to loop through the string at each matched <span or </span and replace them that way. But if you know that the content is going to have properly formatted elements, the regex may work!
 
Share this answer
 
Comments
LB2371 15-Feb-23 4:06am    
Nice solution! Just a question: why "replaceAll", instead of "replace"? It works the same.
Chris Copeland 16-Feb-23 5:03am    
No particular reason, mostly "replaceAll" requires that the global flag be passed in otherwise it fails, so it simply adds that small validation that it'll affect all instances :)
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
 
Share this answer
 
v6
Comments
LB2371 14-Feb-23 6:02am    
Your regex (<span([^>]*)>) doesn't match the closing tag of span.
Andre Oosthuizen 14-Feb-23 6:42am    
Thanks LB2371, edited code.
This is the solution I've found (but maybe there's a better one...):
JavaScript
text.innerHTML = text.innerHTML.replace(/<\/?[^>]+>/g, m => m.replace("span", "a"));
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900