JavaScriptで、タグに影響を与えずにHTMLページのテキストを置き換えるにはどうすればよいですか？

私はJavascriptで置き換える方法を理解しようとしています。私はページの本文全体を見ていて、HTMLタグ内で一致しないキーワードを置き換えたいと考えています。ここでJavaScriptで、タグに影響を与えずにHTMLページのテキストを置き換えるにはどうすればよいですか？

は一例です：

<body> 
    <span id="keyword">blah</span> 
    <div> 
    blah blah keyword blah<br /> 
    whatever keyword whatever 
    </div> 
</body> 

<script type="text/javascript"> 
var replace_terms = { 
    'keyword':{'url':'http://en.wikipedia.org/','target':'_blank'} 
} 

jQuery.each(replace_terms, function(i, val) { 
    var re = new RegExp(i, "gi"); 
    $('body').html(
    $('body').html().replace(re, '<a href="'+ val['url'] +'" target="'+val['target']+'">' + i + '</a>') 
); 
}); 

</script>

私は（<と>間）HTMLタグ内にない「キーワード」のすべてのインスタンスを置き換えるために探しています。

「キーワード」がscriptまたはstyleの要素内にある場合は、無視する必要があります。

出典

2009-09-18 Phil

は、HTMLタグ内の定義によってページ全体ではないですか？ –

はい。私の例で持っていたHTMLは出てこなかった。基本的には、タグの属性を置き換えたくないということです。 – Phil

私は彼が（属性名/値のように）括弧内にあることを意味していると思っています。 – Mayo

正規表現を使用してHTMLを解析しないでください。 [X] [HT] MLは正規言語ではなく、regexを使って確実に処理することはできません。あなたのブラウザには良いHTMLパーサーが組み込まれています。タグがどこにあるのかを調べるのに苦労してください。

また、身体のhtml()/innerHTMLで作業したいとは思っていません。これにより、ページ全体のシリアライズと再解析が遅くなり、HTMLでシリアル化できない情報（イベントハンドラ、フォーム値、その他のJavaScript参照など）が失われます。ここで

は私のために働くように見えるDOMを利用する方法です。

function replaceInElement(element, find, replace) { 
    // iterate over child nodes in reverse, as replacement may increase 
    // length of child node list. 
    for (var i= element.childNodes.length; i-->0;) { 
     var child= element.childNodes[i]; 
     if (child.nodeType==1) { // ELEMENT_NODE 
      var tag= child.nodeName.toLowerCase(); 
      if (tag!='style' && tag!='script') // special case, don't touch CDATA elements 
       replaceInElement(child, find, replace); 
     } else if (child.nodeType==3) { // TEXT_NODE 
      replaceInText(child, find, replace); 
     } 
    } 
} 
function replaceInText(text, find, replace) { 
    var match; 
    var matches= []; 
    while (match= find.exec(text.data)) 
     matches.push(match); 
    for (var i= matches.length; i-->0;) { 
     match= matches[i]; 
     text.splitText(match.index); 
     text.nextSibling.splitText(match[0].length); 
     text.parentNode.replaceChild(replace(match), text.nextSibling); 
    } 
} 

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad 
var find= /\b(keyword|whatever)\b/gi; 

// replace matched strings with wiki links 
replaceInElement(document.body, find, function(match) { 
    var link= document.createElement('a'); 
    link.href= 'http://en.wikipedia.org/wiki/'+match[0]; 
    link.appendChild(document.createTextNode(match[0])); 
    return link; 
});

出典

2009-09-18 14:23:41 bobince

'i - > 0'賢い。私はかつてそれを見たことがない。 –

私はそれを信用することはできません。それはC言語の逆反復のイディオムです！ :-) – bobince

私は通常、 'i - 'を 'for（var i = 100; i--;）'のように使用します。 – kangax

JavaScriptで、タグに影響を与えずにHTMLページのテキストを置き換えるにはどうすればよいですか？

答えて

関連する問題