3

指定された「#content」div で特定のキーワードを検索するウィジェットを作成しています。

jQuery（簡易版）を使用して最初に設定した方法は次のとおりです。

  • コンテンツの html に等しい変数を設定します。var content = $('content').html();
  • いくつかの正規表現を使用して、特定のキーワードを<a href='link.html'>keyword</a>
  • コンテンツ div の html を新しいコンテンツに置き換えます。$('content').html(content);

これはほとんどの場合機能しますが、「#content」div に JavaScript が含まれている場合に問題が発生します。を設定すると、 div に$('content').html(content)含まれるすべての JavaScript コードが再実行され、エラーが発生する可能性があります。$('content')これは任意のサイトで動作するように作成しているウィジェットであるため、コンテンツ div を制御することはできません。また、そこに JavaScript が含まれるかどうかも制御できません。

<a href='link.html'>keyword</a>私の質問は、 div のコンテンツ全体を置き換えずに、キーワードだけを に置き換える方法はありますか?

4

3 に答える 3

6

<a href='link.html'>keyword</a>私の質問は、 div のコンテンツ全体を置き換えずに、キーワードだけを に置き換える方法はありますか?

はい。これは、jQuery があまり提供しない (数少ない) 場所の 1 つです。

ただし、未加工の DOM API レベルでは、要素の実際のテキストを含むTextノードには、ノードを特定の場所で隣接する 2 つのノードに分割できるsplitText機能があります。したがって、あなたの場合、単語の先頭で分割し、単語の末尾で再度分割し、その中間Textノードを新しいアンカーでラップします。

以下に例を示します。ソース

HTML:

<input type="button" id="theButton" value="Make it a link">
<p id="example">This is the example paragraph.</p>

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    var targetWord, p, textNode, index, nodeWord, nodeAfter;

    // Our target word
    targetWord = "example";

    // Get the paragraph using jQuery; note that after we
    // use jQuery to get it (because it fixes getElementById for
    // us on older versions of IE), we then use [0] to access
    // the *raw* `p` element.
    // Then get the text node from it.
    p = $("#example")[0];
    textNode = p.firstChild;

    // Find our text in the text node
    index = textNode.nodeValue.indexOf(targetWord);
    if (index !== -1) {
      // Split at the beginning of the text
      nodeWord = textNode.splitText(index);

      // Split the new node again at the end of the word
      nodeAfter = nodeWord.splitText(targetWord.length);

      // Insert a new anchor in front of the word
      anchor = document.createElement('a');
      anchor.href = "http://stackoverflow.com";
      p.insertBefore(anchor, nodeWord);

      // Now move the word *into* the anchor
      anchor.appendChild(nodeWord);
    }
  });

});

当然、それを改善するためにやりたいことがいくつかあります。

  • index === 0親要素の先頭に空のテキスト ノードを作成せずにケースを処理します。(無害ですが、理想的とは言えません。)
  • 単語が親の最後にあるケースを処理して、そこに空のテキスト ノードが存在しないようにします。（また。）
于 2012-04-23T16:24:59.080 に答える
2

このようにすべてのコンテンツを置き換えずにキーワードのみを置き換えることができ、

function keywordconvert(str, p1, offset, s)  {
      return "<a href=\"link?t="+encodeURIComponent(p1)+"\">"+p1+"</a>";
}

function search(keyword) {
   var content = document.getElementById("content");
   var re = new RegExp("("+keyword+")","g");
  content.innerHTML = content.innerHTML.replace(re, keywordconvert);
}

利用方法

search("keyword");

</p>

デモ

于 2012-04-23T16:39:16.933 に答える
0

はい。ただし、すべてのテキスト ノードを手動でループする必要があります。

最初にタグを削除する方がはるかに簡単です。<script>タグが実行されると、ページ上で不要になるためです (すべてがメモリに保持されます)。

$('#content script').remove();

これにより、要素からスクリプトが削除され、#content既存の置換コードを問題なく実行できます。

于 2012-04-23T16:25:18.780 に答える