HTMLでキーワードを強調表示するのに最適なソリューション

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しました。

innerHTML の置換で実現できる簡単な操作だと思っていましたが、多くの問題に遭遇しました。この記事では、これらの問題と最終的な完璧な解決策を記録し、同じ経験をした友人の役に立つことを願っています。結果だけに興味がある場合は、プロセスを無視して結果に進んでください。

一般的な方法:定期的な交換

アイデア: 要素を強調表示するには、キーワードを抽出してタグで囲み、タグのスタイルを調整する必要があります。 innerText または outText の代わりに innerHTML または outHTML を使用します。

const regex = 新しい RegExp(キーワード、"g")
element.innerHTML = element.innerHTML.replace(正規表現、"<b class="a">"+キーワード+"</b>")
element.classList.add("ハイライト")

これを行うと、次のような隠れた危険が生じます。

()\
分割
<div id="親">
    <div class="test">テスト</div>
  </div>

キーワード親ノード要素は、クラスを使用して背景色付けを実行します。これにより、元の DOM がある程度汚染され、要素の再配置に影響する可能性があります。 (プラグインなので、元のDOMをできるだけ変更しないことが望まれます)

通常の最適化1: タグ内の要素のみを処理する

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // キーワードに含まれる / などの特殊文字をエスケープします。
var finder = new RegExp(">.*?"++".*?<") // クラスやIDなどの誤操作を避けるためにタグ内のテキストを抽出します。 element.innerHTML = element.innerHTML.replace(finder,function(matched){
        matched.replace(text,"<br>"+text+</br>) を返します
}) // 抽出したタグテキスト内のキーワードを置き換える

これでほとんどの問題は解決できますが、タグ属性に < のような記号がある限り、一致ルールが破られ、通常の抽出コンテンツが不正確になるという問題がまだ残っています。HTML5 データセットは任意のコンテンツをカスタマイズできるため、これらの特殊文字は避けられません。

<div dataset="p>d">置換</div>

通常の最適化2: 影響を受ける可能性のあるラベルをクリアする

<div id="keyword">キーワード</div>
  =》終了タグを変数 [replaced1] キーワード [replaced2] に置き換えます // 終了タグ内の id="keyword" は処理されません =》
  [置換1]<b>キーワード</b>[置換2]
  =》一時変数を元のタグ <div id="keyword"><b>keyword</b></div> に置き換えます
  • このアイデアとソースコードはここから来ていますが、問題は次のとおりです:
  • [replaced1]にキーワードが含まれている場合、置換中に例外が発生します。

最も重要なことは、タグ値に <> 記号が含まれている場合、この方法ではタグを正しく抽出できないことです。

つまり、多くの試行を経ても、正規表現はさまざまな状況を効果的に処理することができませんでした。その後、考え方を変えて、文字列ではなくノードを通じて処理するようになりました。 element.childNodes は、タグ内のノイズ情報を最も効果的にクリーンアップできます。

[完璧な解決策] DOMノードを介した処理

<div id="親">
    キーワード1
  <span id="子">
    キーワード2
  </span>
 </div>

parent.childNodes を通じてすべての子ノードを取得します。次のように、子ノードをinnerText.replce(keyword,result)で置き換えて、目的の強調表示効果を得ることができます: <span id="child"><b>keyword</b> 2</span> (再帰処理: 子ノードに子ノードが含まれていない場合は置き換えます)。

ただし、キーワード 1 はテキスト ノードであり、テキスト コンテンツを変更することしかできず、HTML を追加することはできず、そのスタイルを個別に制御することもできません。そして、テキストノードは通常のノードに変換できないため、これが最も厄介な点です。

最後に、この記事の焦点はここにあります。この機能のおかげで、私は初めてテキストノードについて真剣に知るようになりました。ここからテキストが検出され、テキスト ノードを切り取って置き換えることで強調表示が実現されます。

ソースコードとハイライトの復元、ソースコードを参照

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
ハイライト = 関数 (ノード、reg){
    if (node.nodeType == 3) { //テキストノードのみ処理 const match = node.data.match(new RegExp(reg));
        (一致)の場合{
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="y"
          定数 wordNode = node.splitText(match.index)
          wordNode.splitText(match[0].length); // 最初のキーワードと最後の3つのテキストノードに分割します。const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//ハイライトノードが正常に構築されました wordNode.parentNode.replaceChild(highlightEl, wordNode);//テキストノードを置き換えます}
    } そうでない場合 (node.nodeType == 1 && node.dataset.highlight!="y"
    ){
        (var i = 0; i < node.childNodes.length; i++) {
            ハイライト(node.childNodes[i], reg);
            私は++
        }
    }  
}

要約する

上記は、HTML でキーワードを強調表示するための完璧なソリューションです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  モバイル開発におけるHTML5開発の現状を深く理解する

>>:  CentOS7にsshをインストールして設定する

推薦する

jQueryは何に使われるのですか?jQueryは実際にはjsフレームワークです

jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...

Kubernetes オブジェクトボリュームの詳細な使用方法

概要ボリュームは、さまざまなストレージ リソースを抽象化および仮想化したものです。ストレージ リソー...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い

まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

VueRouterルーティングの詳細な説明

目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...

Vue 学習 - VueRouter ルーティングの基礎

目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

CSS の position 属性の値に関する研究 (概要)

CSS の位​​置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

Vue を使用して CSS トランジションとアニメーションを実装する方法

目次1. トランジションとアニメーションの違い2. Vueを使用して基本的なCSSトランジションとア...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

vue プロジェクトで rem を使用して px を置き換える例

目次道具プラグインをインストールするプロジェクトのルートディレクトリに.postcssrc.jsファ...

ネイティブ js カプセル化シームレスカルーセル機能

ネイティブjsカプセル化シームレスカルーセルプラグイン、参考までに、具体的な内容は次のとおりです。例...

Docker を使用して Go Web アプリケーションをデプロイする方法

目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...