diff --git a/src/auto-complete/HighlightOption.tsx b/src/auto-complete/HighlightOption.tsx index 8c68b74864..b53a8a798a 100644 --- a/src/auto-complete/HighlightOption.tsx +++ b/src/auto-complete/HighlightOption.tsx @@ -1,4 +1,5 @@ import React, { useMemo } from 'react'; +import escapeRegExp from 'lodash/escapeRegExp'; import useConfig from '../hooks/useConfig'; export interface TdHighlightOptionProps { @@ -15,7 +16,7 @@ const HighlightOption: React.FC = (props) => { const words = useMemo<{ list: string[]; keyword?: string }>(() => { if (!content) return { list: [] }; if (typeof content !== 'string' || !keyword) return { list: [content] }; - const regExp = new RegExp(keyword, 'i'); + const regExp = new RegExp(escapeRegExp(keyword), 'i'); const splitKeyword = content.match(regExp)?.[0]; return { list: content.split(splitKeyword), diff --git a/src/auto-complete/OptionList.tsx b/src/auto-complete/OptionList.tsx index 55978dc7c5..2c6599b584 100644 --- a/src/auto-complete/OptionList.tsx +++ b/src/auto-complete/OptionList.tsx @@ -1,6 +1,7 @@ import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react'; import classNames from 'classnames'; import isFunction from 'lodash/isFunction'; +import escapeRegExp from 'lodash/escapeRegExp'; import useConfig from '../hooks/useConfig'; import log from '../_common/js/log'; import { CommonClassNameType } from '../hooks/useCommonClassName'; @@ -65,7 +66,7 @@ const OptionsList = forwardRef((props: Options options = options.filter((option) => props.filter(value, option)); } else if (props.filterable) { // 默认过滤规则 - const regExp = new RegExp(value, 'i'); + const regExp = new RegExp(escapeRegExp(value), 'i'); options = options.filter((item) => regExp.test(item.text)); } diff --git a/src/auto-complete/_example/filter.jsx b/src/auto-complete/_example/filter.jsx index a0fcded179..1ecef57805 100644 --- a/src/auto-complete/_example/filter.jsx +++ b/src/auto-complete/_example/filter.jsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { Space, AutoComplete } from 'tdesign-react'; +import escapeRegExp from 'lodash/escapeRegExp'; const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词']; @@ -8,7 +9,7 @@ const AutoCompleteBaseFilter = () => { const [value2, setValue2] = useState(''); function filterWords(keyword, option) { - const regExp = new RegExp(keyword); + const regExp = new RegExp(escapeRegExp(keyword)); return regExp.test(option.text); }