Reactで検索キーワードのハイライトを実装する方法-フロントエンドQ&A-php.cn

Reactで検索キーワードのハイライトを実装する方法

藏色散人

リリース： 2022-12-30 13:50:31

オリジナル

3002 人が閲覧しました

react で検索キーワードを強調表示する方法: 1. 通常のルールを使用してリストのキーワードを照合し、タグを使用してキーワードを含めます; 2. color 属性をタグに追加し、react リッチテキストを使用します。レンダリング: レンダリングにより、高速検索とキーワードの強調表示が可能になります。

Reactで検索キーワードのハイライトを実装する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で検索キーワードを強調表示するにはどうすればよいですか?

React は高速検索とキーワードの強調表示を実装します

要件:

検索ボタンをクリックして、あいまい一致リストをポップアップ表示します。

ドロップダウンリストからオプションを選択し、クリックすると、対応するページのキーワードの場所にジャンプします。

アイデア:

通常のルールを使用してリストのキーワードを照合し、ラベルを使用してキーワードを含めます。

ラベルに色属性を追加します。リッチテキストレンダリングで React Render を使用する

js コンテンツ:

/**
    * 关键字变色
    * @params content 内容
    * @params keyword 关键词
    * @params tagName 标签名
   */
   warpTag(content, keyword, tagName) {
     if (content === "No results") {
       return content
     }
     const a = content.toLowerCase()
     const b = keyword.toLowerCase()
     const indexof = a.indexOf(b)
     const c = indexof > -1 ? content.substr(indexof, keyword.length) : &#39;&#39;
     const val = `<${tagName} style="color:#FF6600;">${c}</${tagName}>`
     const regS = new RegExp(keyword, &#39;gi&#39;)
     console.log(&#39;regS&#39;,regS,keyword,val)
     console.log(&#39;regS222222&#39;,content,content.replace(regS, val))
     return content.replace(regS, val)
   }