Cara melaksanakan penyerlahan kata kunci carian dalam tindak balas

Cara untuk menyerlahkan kata kunci carian dalam React: 1. Gunakan peraturan biasa untuk memadankan kata kunci daripada senarai, dan kemudian gunakan label untuk mengandungi kata kunci 2. Tambahkan atribut warna pada label, dan kemudian gunakan pemaparan teks kaya reaksi. Rendering membolehkan carian pantas dan penyerlahan kata kunci.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menyerlahkan kata kunci carian dalam React?

React melaksanakan carian pantas dan penyerlahan kata kunci

Keperluan:

Klik butang carian untuk muncul senarai padanan kabur.

Pilih pilihan daripada senarai lungsur turun, dan klik untuk melompat ke lokasi kata kunci halaman yang sepadan.

Idea:

Gunakan peraturan biasa untuk memadankan kata kunci daripada senarai, kemudian gunakan teg untuk memasukkan kata kunci,

Tambahkan atribut warna pada teg , gunakan react Render dengan pemaparan teks kaya

kandungan 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)
    }

kandungan jsx:

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

Pembelajaran yang disyorkan: "tutorial video reaksi"

Atas ialah kandungan terperinci Cara melaksanakan penyerlahan kata kunci carian dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!