diff --git a/src/application/components/HighlightMatch.tsx b/src/application/components/HighlightMatch.tsx index d32e3a554..4b1aedede 100644 --- a/src/application/components/HighlightMatch.tsx +++ b/src/application/components/HighlightMatch.tsx @@ -4,7 +4,20 @@ interface HighlightMatchProps { } const HighlightMatch = ({ searchTerm, value }: HighlightMatchProps) => { - const regex = new RegExp(searchTerm, "i"); + if (!searchTerm) { + return <>{value}; + } + + const escapedSearchTerm = RegExp.escape(searchTerm); + + let regex: RegExp; + + try { + regex = new RegExp(escapedSearchTerm, "i"); + } catch { + return <>{value}; + } + const match = regex.exec(value); if (!match) { @@ -17,9 +30,9 @@ const HighlightMatch = ({ searchTerm, value }: HighlightMatchProps) => { {match[0]} - {value.slice(match.index + searchTerm.length)} + {value.slice(match.index + match[0].length)} ); }; -export default HighlightMatch; +export default HighlightMatch; \ No newline at end of file diff --git a/src/application/components/ObjectViewer/ObjectKey.tsx b/src/application/components/ObjectViewer/ObjectKey.tsx index b6fb540a4..b850dd192 100644 --- a/src/application/components/ObjectViewer/ObjectKey.tsx +++ b/src/application/components/ObjectViewer/ObjectKey.tsx @@ -14,7 +14,9 @@ export const ObjectKey = customRenderable( ({ className, value, softWrapCharacters }: ObjectKeyProps) => { const uniqueChars = new Set(softWrapCharacters); const regex = softWrapCharacters - ? new RegExp(`(${softWrapCharacters.join("|")})`) + ? new RegExp( + `(${softWrapCharacters.map((character) => RegExp.escape(character)).join("|")})` + ) : null; return ( @@ -35,4 +37,4 @@ export const ObjectKey = customRenderable( ...props, value: parentProps.value, }) -); +); \ No newline at end of file