feat: 支持搜索词在文中高亮

README.md

@@ -1,4 +1,4 @@
-# vuepress-plugin-fulltext-search
+# vuepress-plugin-fulltext-highlight-search
 
 Add full-text search capabilities to your [VuePress](https://vuepress.vuejs.org/) website using the
 [Flexsearch](https://github.com/nextapps-de/flexsearch) library.
@@ -10,9 +10,9 @@ Many thanks to [Ahmad Mostafa](https://ahmadmostafa.com/2019/12/09/build-better-
 First, install plugin.
 
 ```bash
-npm i vuepress-plugin-fulltext-search -D
+npm i vuepress-plugin-fulltext-highlight-search -D
 # or
-yarn add vuepress-plugin-fulltext-search -D
+yarn add vuepress-plugin-fulltext-highlight-search -D
 ```
 
 Then, enable the plugin in your `docs/.vuepress/config.js`:
@@ -21,7 +21,7 @@ Then, enable the plugin in your `docs/.vuepress/config.js`:
 // docs/.vuepress/config.js
 module.exports = {
   // ...
-  plugins: ['fulltext-search'],
+  plugins: ['fulltext-highlight-search'],
 }
 ```
 
@@ -90,7 +90,7 @@ const { path } = require('@vuepress/shared-utils')
 module.exports = {
   plugins: [
     [
-      'fulltext-search',
+      'fulltext-highlight-search',
       {
         // provide the contents of a JavaScript file
         hooks: fs.readFileSync(path.resolve(__dirname, './searchHooks.js')),
@@ -132,7 +132,7 @@ For example:
 module.exports = {
   plugins: [
     [
-      'fulltext-search',
+      'fulltext-highlight-search',
       {
         tokenize: 'full',
         split: /\s+/,

components/SearchBox.vue

@@ -61,6 +61,8 @@ export default {
       focusIndex: 0,
       placeholder: undefined,
       suggestions: null,
+      highlightWord:'',
+      lastWord:''
     }
   },
   computed: {
@@ -84,9 +86,30 @@ export default {
     },
   },
   watch: {
-    query() {
+    query(val) {
+
       this.getSuggestions()
+      if(!this.suggestions?.length && this.lastWord){
+        this.$nextTick(()=>{
+          let target = document.querySelector('.theme-default-content.content__default').innerHTML
+          document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(`<font>${this.lastWord}</font>`,this.lastWord)
+        })
+      }
     },
+    $route(to,from){
+      if(this.suggestions?.length && this.highlightWord){
+        let val = this.highlightWord
+        const reg = val?new RegExp(val,'g'):''
+          this.$nextTick(()=>{
+            let target = document.querySelector('.theme-default-content.content__default').innerHTML
+            if( val&&reg && target) {
+              document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(val,`<font>${val}</font>`)
+              this.lastWord = val // 记录上一次查询词语
+            }
+        });
+      }
+    }
+
   },
   /* global OPTIONS */
   mounted() {
@@ -175,6 +198,8 @@ export default {
       }
     },
     go(i) {
+      // 第i个匹配
+      this.highlightWord  = ''
       if (!this.showSuggestions) {
         return
       }
@@ -186,7 +211,10 @@ export default {
         window.open(this.suggestions[i].path + this.suggestions[i].slug, '_blank')
       } else {
         this.$router.push(this.suggestions[i].path + this.suggestions[i].slug)
-        this.query = ''
+        const val = this.suggestions[i]?.contentDisplay?.highlightedContent
+        this.highlightWord=val || ''
+
+        // this.query = ''
         this.focusIndex = 0
         this.focused = false
 
@@ -231,6 +259,8 @@ function highlight(str, strHighlight) {
 </script>
 
 <style lang="stylus">
+font
+  background yellow
 .search-box
   display inline-block
   position relative

index.js

@@ -35,7 +35,7 @@ module.exports = (options, ctx, globalCtx) => ({
       if (!$page.title) $page.title = customTitles[normalizePath($page.path)]
     } catch (e) {
       // incorrect markdown
-      console.error('Error when applying fulltext-search plugin:', e)
+      console.error('Error when applying fulltext-highlight-search plugin:', e)
     }
   },
   alias: {
@@ -99,7 +99,7 @@ function getCustomTitles(globalCtx) {
     }
     return result
   } catch (e) {
-    console.error('[fulltext-search] Error while getting sidebar paths:', e)
+    console.error('[fulltext-highlight-search] Error while getting sidebar paths:', e)
     return {}
   }
 }
@@ -110,7 +110,7 @@ function normalizePath(rawPath) {
     const parsedPath = path.parse(rawPath)
     return path.join(parsedPath.dir, parsedPath.name)
   } catch (e) {
-    console.error(`[fulltext-search] Error while normalizing path ${rawPath}:`, e)
+    console.error(`[fulltext-highlight-search] Error while normalizing path ${rawPath}:`, e)
     return null
   }
 }