用span类替换HTML字符串中的一些innerTexts并发布回DOM

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

Use some form of templating:

String.prototype.template = String.prototype.template ||
        function (){
            var  args = Array.prototype.slice.call(arguments)
                ,str = this
            ;
            function replacer(a){
                var aa = Number(a.substr(1))-1;
                return args[aa];
            }
            return  str.replace(/(\$\d+)/gm,replacer);
 };
 var thestring = [ '<p>This is a sample dataa</p><img src="Randomz"'
                  ,' alt="Randomz Image">$1Randomz$2 '
                  ,'is the name of the image</img>'].join('')
    ,nwString = theString.template('<span class="spellerror">','</span>');

Answer 2

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