0

私は JavaScript を初めて使用するので、直面しているこの問題について教えていただければ幸いです。以下の HTML コードでは、特定の単語 ("メッセージ" など) を強調表示しようとしています。単語を追加して太字にします。

<body>
  <img src="http://some.web.site/image.jpg" title="abcd" />
  This is a test message.
</body>

「これはテスト メッセージです」という文字列は body 要素で直接検出されます (つまり、id がないため、テキストを抽出するために getElementById を使用することはできません)。

そこで、body 要素全体を取得し、textContent を使用してテキストを抽出しました (これによりテキストが得られ、html のテキストの上にある画像は無視されました)。次に、単語を強調表示した後、'body's textContent を新しいものに戻します。弦。

問題は、テキストの上にあった画像を保存できず、新しい本文には textContent の値しかなく、画像が失われることです。これは私が使用した JS です (ただし、今は message を phone という単語に置き換えています)。

<script>
function myFunction(){
  var x = document.getElementsByTagName('body')[0].textContent;
  var v = x.replace("message","phone");
  document.getElementsByTagName('body')[0].textContent = v;
} 
</script>

他の要素もある本文のすぐ下に配置されたテキストを置き換える他の方法はありますか?

4

3 に答える 3

2

このようなことを行うには、ドキュメント内のすべてのテキストノードをループし、単語を検索してラップする必要があります。

このようなもの：

function highlight(str,node) {
    if( !node) node = document.body;
    var c = node.children, l = c.length, i, p;
    for( i=0; i<l; i++) {
        if( c[i].nodeType == 1) highlight(str,c[i]);
        if( c[i].nodeType == 3) {
            if( (p=c[i].data.indexOf(str)) > -1) {
                c[i].splitText(p);
                c[i].nextSibling.deleteData(0,str.length);
                c[i].parentNode.insertBefore(
                    document.createElement('b'),c[i].nextSibling
                ).appendChild(document.createTextNode(str));
            }
        }
    }
}

それはそれをする必要があります。highlight("message")使用するには、任意のテキストを使用して、を呼び出すだけです。これは大文字と小文字が区別されることに注意してください。大文字と小文字を区別しないマッチングが必要な場合は、お知らせください。それを考慮して編集します（ただし、ほとんどの場合、おそらく問題を回避できますhighlight("message"); highlight("Message");） 。

また、検索を特定の要素に限定することもできます。あなたが持っているとしましょう<div id="replace-me">、あなたは次のようにその要素に検索を制限することができます：

highlight("message",document.getElementById('replace-me'));

（ノードを取得するために任意の方法を使用できます。これが最も簡単です）

于 2013-01-21T12:18:01.113 に答える
0

試す

var children = document.body.childNodes;
for(var len = children.length, child=0; child<len; child++){
    if (children[child].nodeType === 3){ // textnode
        var contents = children[child].nodeValue;
       children[child].nodeValue = contents.replace(/message/gi, 'phone');
    }
}
于 2013-01-21T12:26:34.330 に答える
0

textContent プロパティは、指定されたノードとそのすべての子孫のテキスト コンテンツを設定または返します。

textContent プロパティを設定すると、すべての子ノードが削除され、指定された文字列を含む単一の Text ノードに置き換えられます。

ここを参照

于 2013-01-21T12:08:53.457 に答える