4

たとえば、私がWebページを持っているとしましょう。

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

「Lorem」という単語のすべてのインスタンスを見つけて、次の2つの方法で操作したいと思います。

  1. <mark>HTML5要素でラップします
  2. .addClass('look-at-me');親要素で実行します。

したがって、結果のHTMLは次のようになります。

<ul>
  <li class="look-at-me"><mark>Lorem</mark> ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

jQueryで単語をハイライトするに関するすべてのコメントを読み、ハイライトからのJSコードで遊んでいます：JavaScriptテキストハイライトjQueryプラグインですが、どちらもコンテキスト内の単語をハイライトするだけです。を使用して単語をラップするようにコードを操作しました<mark>が、親コンテナーを強調表示するという2番目の目標を達成するためのJSのスキルが十分ではありません。私はあなたの役に立つ提案を見たいと思っています。ありがとう！

編集：解決しました！http://jsfiddle.net/GB8zP/1/

4

3 に答える 3

4 
$('li').each(function () {
    $(this).html($(this).html().replace(/Lorem/ig, "<mark>$&</mark>"));
    if ($(this).text().toLowerCase().indexOf('lorem') >= 0) $(this).addClass('look-at-me');
});

jsFiddleの例

于 2013-03-07T17:22:21.670 に答える
2

これを試して

 $("ul li:contains('Lorem')").each(function() {
   $(this).html($(this).html().replace("Lorem","<mark>Lorem</mark>"));
   $(this).parent().addClass("look-at-me");
 })
于 2013-03-07T17:15:40.613 に答える
1

これが私が思いついたものです：http：//jsfiddle.net/c24w/cZegf/

HTML

<ul id="test">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam lorem tincidunt mauris eu Lorem risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

JS

$('li', '#test').each(function highlightElement(i, e) {
    e = $(e);
    e.html(e.html().replace(/lorem/gi, function handleMatch(match) {
        if (!e.hasClass('look-at-me')) e.addClass('look-at-me');
        return '<match>' + match + '</match>';
    }));
});

CSS

.look-at-me {
    background: #f00;
}
match {
    background: #ff0;
}

情報

正規表現：

/lorem/gi
       ↑↑
       ||_ case-insensitive
       |_ matches multiple (global)

マッチ機能：

handleMatch(match)-成功した正規表現の一致はそれぞれこの関数に渡され、一致したテキストはで囲まれ<match></match>ます。この実装では、正規表現のみを更新する必要があるため、強調表示する正確なパターンを簡単に変更できます。また、必要に応じて、一致の親要素がそれに応じて強調表示されます。

于 2013-03-07T17:20:54.853 に答える