web-dev-qa-db-ja.com

見つかった単語を強調表示した静的HTMLページでのJQuery検索

私は、JQueryを使用して静的なHTMLページ内で簡単な検索を試みました。 JQueryを使用するのはこれが初めてであることに言及する必要があります。

私はページで見つかったWordの背景を変更しようとしていますが、これは私がこれまで試したものです：

myJavascript.js：

$(document).ready(function(){

     $('#searchfor').keyup(function(){
         page = $('#all_text').text();
         searchedText = $('#searchfor').val();
         $("p:contains('"+searchedText+"')").css("color", "white");
    });
});

HTMLコードも次のとおりです。

page.html：

<html>
<head>
    <title>Test page</title>
</head>
<body bgcolor="#55c066">
<input type="text" id="searchfor"></input>
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font>
    </p>
</body>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="myJavascript.js"></script>
</html>

Firebugでページを調べた後、JQueryの変数が入力フィールドから値を取得することがわかりますが、強調表示部分を台無しにしていると思います。

よろしくお願いします！

jqueryhtmlcsssearchhighlight
18
Radu Gheorghiu

このようなことをしてください

 $("p:contains('"+searchedText+"')").each( function( i, element ) {
      var content = $(element).text();
      content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' );
      element.html( content );
 });

 .search-found {
     text-decoration: underline;
 }

追伸これは、各「要素」にプレーンテキストのみのコンテンツがある場合にのみ機能します。そうでない場合、子ノードが削除されます。

編集：eachコールバックの余分な '）'を削除しました

11
scibuff

自作の強調表示機能を使用するのが悪い考えである理由

独自の強調表示機能をゼロから作成し始めるのがおそらく悪い考えである理由は、他の人がすでに解決した問題に必ず出くわすからです。課題：

  • DOMイベントを破棄し、DOM再生成を何度もトリガーすることなく、一致を強調表示するには、HTML要素を持つテキストノードを削除する必要があります（例：innerHTML）
  • 強調表示された要素を削除する場合は、HTML要素とそのコンテンツを削除し、さらに検索するために分割されたテキストノードを結合する必要があります。すべての蛍光ペンプラグインはテキストノード内で一致を検索し、キーワードが複数のテキストノードに分割される場合、それらは検出されないため、これが必要です。
  • また、考えていない状況でプラグインが機能することを確認するテストを作成する必要があります。そして、私はクロスブラウザテストについて話しています！

複雑に聞こえますか？強調表示、発音区別符号マッピング、同義語マッピング、iframe内の検索、分離されたWord検索などからいくつかの要素を無視するような機能が必要な場合、これはますます複雑になります。

既存のプラグインを使用する

既存の適切に実装されたプラグインを使用する場合、上記の名前のものについて心配する必要はありません。 Sitepointの記事10 jQueryテキストハイライトプラグインは、人気のあるハイライトプラグインを比較しています。これには、この質問からの回答のプラグインが含まれます。

mark.js をご覧ください

mark.js は、純粋なJavaScriptで記述されたプラグインですが、jQueryプラグインとしても利用可能です。以下のオプションを持つ他のプラグインよりも多くの機会を提供するために開発されました。

  • 完全な用語ではなく、キーワードを個別に検索する
  • マップの発音記号（たとえば、「justo」も「justò」に一致する必要がある場合）
  • カスタム要素内の一致を無視する
  • カスタムの強調表示要素を使用する
  • カスタム強調表示クラスを使用する
  • カスタムシノニムをマップする
  • iframe内でも検索
  • 条件が見つかりません

[〜＃〜] demo [〜＃〜]

または、 this fiddle を確認できます。

使用例：

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

これは無料で、GitHubで開発されたオープンソースです（ プロジェクトリファレンス ）。

コードを使用したmark.jsキーワードの強調表示の例

$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $("#context").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
});
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Lorem ipsum dolor test sit amet
</div>
21
dude

ここに私のものがあります： http://jsfiddle.net/x8rpY/1/

JS：

$('#searchfor').keyup(function(){
         var page = $('#all_text');
         var pageText = page.text().replace("<span>","").replace("</span>");
         var searchedText = $('#searchfor').val();
         var theRegEx = new RegExp("("+searchedText+")", "igm");    
         var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
         page.html(newHtml);
    });

CSS：

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

繰り返し検索にも機能します。

9
mshsayem
$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $("#context").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
});
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Lorem ipsum dolor test sit amet
</div>
3
Rajan