27

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

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

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 の変数が入力フィールドから値を取得していることがわかりますが、ハイライト部分を台無しにしていると思います。

よろしくお願いします。

4

7 に答える 7

27

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

独自の強調表示関数を最初から作成するのがおそらく悪い考えである理由は、他の人が既に解決した問題に確実に遭遇するからです。課題:

  • HTML 要素を含むテキスト ノードを削除して、DOM イベントを破棄したり、DOM の再生成を何度もトリガーしたりせずに一致を強調表示する必要があります (例: の場合innerHTML) 。
  • 強調表示された要素を削除したい場合は、HTML 要素とそのコンテンツを削除する必要があり、さらに検索するために分割されたテキスト ノードを結合する必要があります。これが必要なのは、すべてのハイライター プラグインが一致するテキスト ノード内を検索し、キーワードが複数のテキスト ノードに分割されている場合、それらが見つからないためです。
  • また、考えもしなかった状況でプラグインが動作することを確認するためのテストを作成する必要があります。そして、私はクロスブラウザテストについて話しているのです!

複雑に聞こえますか？強調表示、分音記号のマッピング、同義語のマッピング、iframe 内の検索、分離された単語の検索などから一部の要素を無視するなどの機能が必要な場合、これはますます複雑になります。

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

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

mark.jsを見てください。

mark.jsは純粋な JavaScript で書かれたプラグインですが、jQuery プラグインとしても利用できます。次のオプションを備えた他のプラグインよりも多くの機会を提供するために開発されました。

  • 完全な用語ではなく、キーワードを個別に検索する
  • 発音区別符号をマップします (たとえば、「justo」も「justò」と一致する必要がある場合)
  • カスタム要素内の一致を無視する
  • カスタム強調表示要素を使用する
  • カスタム強調表示クラスを使用する
  • カスタム同義語のマッピング
  • iframe 内も検索
  • 見つからない用語を受け取る

デモ

または、この 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>

于 2016-05-21T14:42:48.970 に答える
14

このようなことをする

 $("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;
 }

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

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

于 2012-04-04T13:00:24.153 に答える
11

これが私のものです：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;    
}

繰り返し検索にも対応。

于 2012-04-04T14:36:00.937 に答える
-1

（背景に Color ではなく Background-Color を使用したい場合）

通常の css クラスと強調表示されたテキスト用の個別の (継承された) css クラスを作成し、探しているものが見つかったら JQuery を使用して css クラスを変更します。

私の最初の考えですが、それを行うより良い方法があるかどうかはわかりません。

編集: 特定の単語のみを変更する場合は、innerHTML を変更して、その時点で別のタグに配置する必要があります。

于 2012-04-04T12:56:05.383 に答える
-1

私がすぐにハッキングした別の例を次に示します: http://jsfiddle.net/VCJUX/

于 2012-04-04T13:19:22.190 に答える