Fix special character search (#10675)

* fix special character search

* regex update

* repalce regex with variable

* fix test

packages/common/src/regex/index.ts

@@ -31,6 +31,7 @@ export const INVALID_FILENAME_REGEX = /[_<>:"/\\|?*\u0000-\u001F]/
 export const INVALID_FILENAME_WHITESPACE_REGEX = /[\s_<>:"/\\|?*\u0000-\u001F]/
 export const WINDOWS_RESERVED_NAME_REGEX = /^(con|prn|aux|nul|com\d|lpt\d)$/i
 export const VALID_SCENE_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9-]{2,62}[a-zA-Z0-9_\-]$/
+export const VALID_HEIRACHY_SEARCH_REGEX = /[.*+?^${}()|[\]\\]/g
 
 /**
  * Matches CSS imports & URLS.

packages/common/tests/regex.test.ts

@@ -42,6 +42,7 @@ import {
   PUBLIC_SIGNED_REGEX,
   STATIC_ASSET_REGEX,
   USER_ID_REGEX,
+  VALID_HEIRACHY_SEARCH_REGEX,
   VALID_PROJECT_NAME,
   VALID_SCENE_NAME_REGEX,
   WINDOWS_RESERVED_NAME_REGEX
@@ -86,6 +87,36 @@ describe('regex.test', () => {
     })
   })
 
+  describe('HEIRARCHY_SEARCH_REPLACE_REGEX', () => {
+    it('should replace special characters in search', () => {
+      const escapeSpecialChars = (input) => {
+        return input.replace(VALID_HEIRACHY_SEARCH_REGEX, '\\$&')
+      }
+
+      const testCases = [
+        { input: 'a.b', expected: 'a\\.b' },
+        { input: 'a*b', expected: 'a\\*b' },
+        { input: 'a+b', expected: 'a\\+b' },
+        { input: 'a?b', expected: 'a\\?b' },
+        { input: '^a', expected: '\\^a' },
+        { input: 'a$b', expected: 'a\\$b' },
+        { input: '(a)', expected: '\\(a\\)' },
+        { input: 'a|b', expected: 'a\\|b' },
+        { input: '[a]', expected: '\\[a\\]' },
+        { input: 'a\\b', expected: 'a\\\\b' },
+        { input: 'a.b*c+?^${}()|[]\\', expected: 'a\\.b\\*c\\+\\?\\^\\$\\{\\}\\(\\)\\|\\[\\]\\\\' },
+        { input: 'abc', expected: 'abc' }
+      ]
+
+      testCases.forEach(({ input, expected }) => {
+        it(`should escape special characters in "${input}" correctly`, function () {
+          const escaped = escapeSpecialChars(input)
+          assert.equal(escaped, expected, `Expected escaped ${input} string to match expected ${expected} value`)
+        })
+      })
+    })
+  })
+
   describe('INVALID_FILENAME_WHITESPACE_REGEX', () => {
     it('should match invalid filenames', () => {
       const invalidFilenames = [

packages/ui/src/components/editor/panels/Hierarchy/container/index.tsx

@@ -43,6 +43,7 @@ import { Engine, Entity, EntityUUID, UUIDComponent, entityExists } from '@ethere
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
+import { VALID_HEIRACHY_SEARCH_REGEX } from '@etherealengine/common/src/regex'
 import useUpload from '@etherealengine/editor/src/components/assets/useUpload'
 import CreatePrefabPanel from '@etherealengine/editor/src/components/dialogs/CreatePrefabPanelDialog'
 import {
@@ -178,11 +179,16 @@ function HierarchyPanelContents(props: { sceneURL: string; rootEntityUUID: Entit
 
   const searchedNodes: HierarchyTreeNodeType[] = []
   if (searchHierarchy.value.length > 0) {
-    const condition = new RegExp(searchHierarchy.value.toLowerCase())
-    entityHierarchy.value.forEach((node) => {
-      if (node.entity && condition.test(getComponent(node.entity, NameComponent)?.toLowerCase() ?? ''))
-        searchedNodes.push(node)
-    })
+    try {
+      const adjustedSearchValue = searchHierarchy.value.replace(VALID_HEIRACHY_SEARCH_REGEX, '\\$&')
+      const condition = new RegExp(adjustedSearchValue, 'i') // 'i' flag for case-insensitive search
+      entityHierarchy.value.forEach((node) => {
+        if (node.entity && condition.test(getComponent(node.entity, NameComponent)?.toLowerCase() ?? ''))
+          searchedNodes.push(node)
+      })
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   useEffect(() => {