반응에서 검색 키워드 강조를 구현하는 방법-프런트엔드 Q&A-php.cn

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

藏色散人

풀어 주다： 2022-12-30 13:50:31

원래의

2880명이 탐색했습니다.

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) : &#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)
    }

로그인 후 복사

jsx 내용 :

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

로그인 후 복사

추천 학습: "react 비디오 튜토리얼"

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