21

これは何年も前に答えられたと本当に思っていましたが、それでも解決策は見つかりませんでした:

JavaScript を使用して完全にクライアント側で、HTML ページ全体で (サブ) 文字列のすべての出現箇所を強調表示 (つまり、色付きの背景を作成) したいと考えています。

Ctrl+を使用して Google Chrome 内を検索するのと同じようFに、検索用語を入力すると、入力した用語に一致するすべての部分文字列が強調表示されます。

個人的には、DOM ツリーのすべての要素を調べてreplace、検索用語の一部を次のように実行します。

<span style="background-color: yellow">MySearchTerm</span>

しかし、もっと効果的な方法が必要だと思いますか？

私の質問：

JavaScript (または jQuery) を使用して、HTML ページ内のすべての部分文字列の出現を強調表示する方法は?

4

4 に答える 4

7

ctrlブラウザとf機能を何ヶ月も複製する堅牢なテキスト ハイライターを見つけるのに苦労しました。多くの jQuery プラグインを使用しました。他のものよりも優れているものもありますが、HTML にまたがることができるものはありません。リンクを含むテキストを検索したいとします。ブラウザーはそれを実行できますが、私が見つけた jQuery プラグインはできません。

裸のJavaScriptに答えがあることがわかりました。ただwindow.find()。

find(string, matchcase, searchBackward)

string : 検索するテキスト文字列。

matchcase : ブール値。true の場合、大文字と小文字を区別する検索を指定します。このパラメーターを指定する場合は、backward も指定する必要があります。

searchBackward : ブール値。true の場合、後方検索を指定します。このパラメーターを指定する場合は、大文字と小文字を区別することも指定する必要があります。

HTML を含む文字列を強調表示し、関心のあるすべてのブラウザーと互換性があります。詳細については、http://www.w3resource.com/javascript/client-object-property-method/window-find.phpを参照してください。

残念なことに、それをどうすることもできないようです。スタイル付きのスパンタグでラップしたり、位置を取得したり、スクロールしたり、ハイライトの色を変更したりすることはできません。私はまだ理想的なctrl+ fJS関数を探しています。

于 2014-01-24T21:43:25.487 に答える