So implementieren Sie die Hervorhebung von Suchbegriffen in React

So heben Sie Suchschlüsselwörter in React hervor: 1. Verwenden Sie reguläre Regeln, um Schlüsselwörter aus der Liste abzugleichen, und verwenden Sie dann Tags, um Schlüsselwörter einzuschließen. 2. Fügen Sie Farbattribute zu Tags hinzu und verwenden Sie dann React-Rich-Text-Rendering, um eine schnelle Darstellung zu erzielen Suche Und markieren Sie einfach die Schlüsselwörter.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie hebt man Suchbegriffe in React hervor?

React ermöglicht eine schnelle Suche und die Hervorhebung von Schlüsselwörtern

Anforderungen:

Klicken Sie auf die Suchschaltfläche, um die Fuzzy-Matching-Liste anzuzeigen.

Wählen Sie eine Option aus der Dropdown-Liste aus und klicken Sie, um zur entsprechenden Seite mit der Schlüsselwortposition zu springen.

Idee:

Verwenden Sie reguläre Regeln, um Schlüsselwörter aus der Liste abzugleichen, und verwenden Sie dann Tags, um Schlüsselwörter einzuschließen.

Fügen Sie Farbattribute zu Tags hinzu und verwenden Sie React Rich Text Rendering, um

js-Inhalte zu rendern:

 /**
     * 关键字变色
     * @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 Inhalt:

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

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Hervorhebung von Suchbegriffen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!