반응에서 검색 키워드 강조를 구현하는 방법

React에서 검색 키워드를 강조 표시하는 방법: 1. 일반 규칙을 사용하여 목록의 키워드를 일치시킨 다음 태그를 사용하여 키워드를 포함합니다. 2. 태그에 색상 속성을 추가한 다음 반응 서식 있는 텍스트 렌더링을 사용하여 빠르게 렌더링합니다. 검색하고 키워드를 강조표시하세요.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React에서 검색 키워드를 강조 표시하는 방법은 무엇입니까?

React는 빠른 검색과 키워드 강조를 가능하게 합니다

요구 사항:

검색 버튼을 클릭하면 퍼지 일치 목록이 나타납니다.

드롭다운 목록에서 옵션을 선택하고 클릭하면 키워드 위치가 있는 해당 페이지로 이동합니다.

아이디어:

일반 규칙을 사용하여 목록의 키워드를 일치시킨 다음 태그를 사용하여 키워드를 포함하고,

태그에 색상 속성을 추가하고, 반응 서식 있는 텍스트 렌더링을 사용하여 렌더링

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 비디오 튜토리얼"

위 내용은 반응에서 검색 키워드 강조를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!