Merge pull request #522 from SwwweetOrange/fix/search_one_character_bug

fix: solve one character search bug

package.json

@@ -32,6 +32,7 @@
     "gitalk": "^1.7.2",
     "localStorage": "^1.0.4",
     "lodash.throttle": "^4.1.1",
+    "mark.js": "^8.11.1",
     "memory-cache": "^0.2.0",
     "mermaid": "9.2.2",
     "mongodb": "^4.6.0",

themes/example/LayoutSearch.js

@@ -4,6 +4,7 @@ import { BlogListScroll } from './components/BlogListScroll'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import SearchInput from './components/SearchInput'
+import Mark from 'mark.js'
 import LayoutBase from './LayoutBase'
 import { isBrowser } from '@/lib/utils'
 
@@ -15,8 +16,12 @@ export const LayoutSearch = props => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(`${keyword}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
       }
     }, 100)
   }, [router.events])

themes/fukasawa/LayoutSearch.js

@@ -4,6 +4,7 @@ import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import Mark from 'mark.js'
 import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = (props) => {
@@ -14,8 +15,12 @@ export const LayoutSearch = (props) => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(`${currentSearch}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+        const re = new RegExp(currentSearch, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
       }
     }, 100)
   })

themes/hexo/LayoutSearch.js

@@ -6,6 +6,7 @@ import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import SearchInput from './components/SearchInput'
 import { useGlobal } from '@/lib/global'
+import Mark from 'mark.js'
 import TagItemMini from './components/TagItemMini'
 import Card from './components/Card'
 import Link from 'next/link'
@@ -25,10 +26,12 @@ export const LayoutSearch = props => {
         const targets = document.getElementsByClassName('replace')
         for (const container of targets) {
           if (container && container.innerHTML) {
-            const re = new RegExp(`${currentSearch}`, 'gim')
-            container.innerHTML = container.innerHTML.replace(
-              re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
-            )
+            const re = new RegExp(currentSearch, 'gim')
+            const instance = new Mark(container)
+            instance.markRegExp(re, {
+              element: 'span',
+              className: 'text-red-500 border-b border-dashed'
+            })
           }
         }
       }

themes/medium/LayoutSearch.js

@@ -6,6 +6,7 @@ import CategoryGroup from './components/CategoryGroup'
 import { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import BLOG from '@/blog.config'
+import Mark from 'mark.js'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 
@@ -16,8 +17,12 @@ export const LayoutSearch = (props) => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(`${keyword}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
       }
     },
     100)

themes/next/LayoutSearch.js

@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
+import Mark from 'mark.js'
 import BLOG from '@/blog.config'
 
 export const LayoutSearch = (props) => {
@@ -12,8 +13,12 @@ export const LayoutSearch = (props) => {
   setTimeout(() => {
     const container = isBrowser() && document.getElementById('container')
     if (container && container.innerHTML) {
-      const re = new RegExp(`${keyword}`, 'gim')
-      container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+      const re = new RegExp(keyword, 'gim')
+      const instance = new Mark(container)
+      instance.markRegExp(re, {
+        element: 'span',
+        className: 'text-red-500 border-b border-dashed'
+      })
     }
   }, 200)
   return (