Question

I have a HTML string ( not DOM element ) like :

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>

I need to append a <span class="spellerror"></span> to the words that have problem and that too only the Textual contents need to be checked and appended .

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image"><span class="spellerror"> Randomz </span> is the name of the image</img>  

My problem is that this is a mix of HTML and regex . Is it possible:

1. To make this some kind of a DOM element and then work on it ?
2. Or is there a regex way to achieve this.

I dont want to touch the attributes and if I modify Text contents , how do I publish it back …because I need some HTML inserted there .

Answer 1

I dont love this solution, but it works:

'<img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>'
    .match(/<[^>]+>|[^<]+|<\/[^>]+>/g)
    .map(function (text, index) {
        if (index === 1) {
            return text.replace(/(Randomz)/, '<span class="spellerror">$1</span>');
        } else {
            return text;
        }
    })
    .join('');

The regex splits into opening tag, innerText, closing tag.
Then iterates on all members, if its the innerText, it replaces with desired text
Then joins.

Im stil trying to think of something less round-about but thats all i got