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

react で検索キーワードを強調表示する方法: 1. 通常のルールを使用してリストのキーワードを照合し、タグを使用してキーワードを含めます; 2. color 属性をタグに追加し、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) : ''
      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)
    }

jsx コンテンツ:

<span dangerouslySetInnerHTML={{__html: this.warpTag(item.n, keyword, "span")}}></span>

推奨学習: 「react ビデオ チュートリアル 」

以上がReactで検索キーワードのハイライトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。