ように私は、HTML文字列（いないDOM要素）を持っているバックDOM

Question

にスパンクラスおよびパブリッシングとHTMLの文字列の一部innerTextsの交換：

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

私は問題を抱えている言葉に<span class="spellerror"></span>を追加する必要があり、テキストの内容だけをチェックして追加する必要があるということです。

<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> 

私の問題は、これはHTMLと正規表現が混在していることです。可能ですか：

1. これをDOM要素とし、それを処理するにはどうすればいいですか？
2. これを実現するための正規表現がありますか？

テキストの内容を変更すると、テキストの内容を変更したければ、そこにいくつかのHTMLを挿入する必要があるため、どのように公開するのですか？

Answer 1

を、私はこのソリューションを愛していけないが、それは動作します：

'<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(''); 

正規表現は、タグを閉じ、開始タグ、のinnerTextに分かれます。 次に、innerTextの場合はすべてのメンバーを反復処理し、目的のテキストに置き換えます。 次に結合します。イムは、STIL少ないラウンドについて何かを考えるしようとしているが、私は、私は唯一のHTML文字列ではなくDOM要素を持っていることをrephasizeする必要があり、私は

Answer 2

は、テンプレートのいくつかのフォームを使用します

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>');