//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 : 영문 대소문자를 무시, 모두 일치하는 패턴 검색