HTML DOMで複数の置換えを行う方法は？

Question

テキストまたはリンクをHTMLで置き換えるためのJavaScriptコードがありますが、コードは交換用の場合にのみ動作します。私は多くのテキスト & リンクをHTMLコードに置き換える必要があります。

var search = "Selena"; 
var replacement = "Love"; 

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement); 

Answer 1

は、正規表現でそれを試してみてください。

document.body.innerHTML = document.body.innerHTML.replace(/Selena/g,"Love") 

出典：あなたが効果的に全体のDOM上書きせずにこれを行うにはTreeWalkerを使用することができます少し準備作業でhttps://www.w3schools.com/jsref/jsref_obj_regexp.asp

Answer 2

あなたはすべての発生を置き換えるためにg（グローバル）フラグを持っていることregexを使用することができます。 あなたが正規表現で大文字と小文字を区別しない使用iフラグをしたい場合：

var search = ["Selena", "jhon sara"]; 
 
    var replacement = ["Love", "nida"] ; 
 
    var html = document.body.innerHTML; 
 

 
    for(var i =0; i<search.length; i++) { 
 
    var search_regex = new RegExp(search[i],"gi"); 
 

 
    html = html.replace(search_regex, replacement[i]); 
 
    } 
 

 
    document.body.innerHTML = html;

Selena is selena. Jhon sara is jhon sara.

Answer 3

- 任意のイベントリスナーを要素に追加遅く、あなたが失う

var replacements = { 
 
    'Selena': 'Love', 
 
    'mical': 'jhon', 
 
    'sara': 'nida', 
 
    'jhoony': 'joona' 
 
}; 
 
var keys = Object.keys(replacements); 
 
var regex = new RegExp(keys.join('|'),'g'); 
 
var replacer = function(str) { 
 
    return str.replace(regex, function (key) { 
 
     return replacements[key]; 
 
    }); 
 
} 
 
    
 
var treeWalker = document.createTreeWalker(
 
    document.body, 
 
    NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT, { 
 
     acceptNode: function(node) { 
 
      // only processing non-empty text nodes, and <A> with non empty href 
 
      if ((node.nodeName == '#text' && node.nodeValue) || (node.nodeName == 'A' && node.href)) { 
 
       return NodeFilter.FILTER_ACCEPT; 
 
      } 
 
      // Skip this node, but still consider its child nodes 
 
      return NodeFilter.FILTER_SKIP; 
 
     } 
 
    }, 
 
    false 
 
); 
 

 
while(treeWalker.nextNode()) { 
 
    var node = treeWalker.currentNode; 
 
    var replace; 
 
    if (node.nodeName == '#text') { 
 
     node.nodeValue = replacer(node.nodeValue); 
 
    } else { 
 
     node.href = replacer(node.href); 
 
    } 
 
}

<span>Selena 
 
    <b>mical</b> 
 
    sara 
 
    <a href='#jhoony'>Link to #jhoony</a> 
 
</span>