input 검색 용으로 정규식 사용

null·2022년 3월 23일
0
	//input 검색 onChange
  const onChangeGoodsSearch = useCallback((e) => {
    const searchValue = e.target.value;
    if (searchValue === '') {
      setInputSearchValue('');
    }
  }, []);

	// input 검색 엔터 쳤을 경우 
  const onClickGoodsSearch = useCallback(() => {
    const searchValue = inputSearchGoodsRef.current.state.value;
    setInputSearchValue(searchValue);
  }, []);

이제 결과값을 출력하려면 필요한 것

const showTheGuideId = (item: any) => {
   const id = item.id || item.adminId;

   let regex;
   if (inputSearchValue) {
   	//RegExp 생성자 함수를 호출한다
     regex = new RegExp(inputSearchValue, 'gi');
   }

// 문자열.replace(정규식,대체문자)	일치하는 문자열을 대체하고 대체된 문자열(String) 반환
   const result = id.replace(
     regex,
     (match: string) => `<span style="color: #F57C7C; background: yellow; font-weight: bold;">${match}</span>`
   );
   return <div dangerouslySetInnerHTML={{ __html: result }} />;
 };

- flag
g : 전체 모든 문자열 변경
i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색

profile
개발이 싫어.

0개의 댓글