├── .gitignore
├── README.md
├── babel.config.js
├── changeLog.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── SearchHighlight.vue
    ├── index.js
    └── main.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-search-highlight
  2 | Vue文本关键字高亮组件，v1.1.0开始支持HTML内容跨标签匹配关键字。
  3 | 
  4 | ## 安装
  5 | ```bash
  6 | # 使用yarn
  7 | yarn add vue-search-highlight
  8 | 
  9 | # 使用npm
 10 | npm install vue-search-highlight​
 11 | ```
 12 | 
 13 | ## 引入组件
 14 | 像使用普通组件一样使用vue-search-highlight。
 15 | ```js
 16 | import SearchHighlight from 'vue-search-highlight'
 17 | // 注册为子组件
 18 | components: {
 19 |   'search-highlight': SearchHighlight
 20 | },​
 21 | ```
 22 | 
 23 | ## 组件props
 24 | | 名称 | 说明 |
 25 | | --- | --- |
 26 | | content | 需要展示的文本，搜索即在这个文本中进行。 |
 27 | | keyword | 搜索关键字 |
 28 | | highlightStyle | 所有关键词高亮的样式, 默认'background: #ffff00' |
 29 | | currentStyle | 当前搜索到的关键词样式, 默认default: 'background: #ff9632' | 
 30 | | regExp | 启用正则匹配，会用关键词构建一个正则表达式来匹配。启用时请确保keyword能正确构造正则表达式，并且不会匹配空串，否则组件将不会匹配任何内容 |
 31 | 
 32 | ## 组件事件
 33 | | 事件名 | 说明 |
 34 | | --- | --- |
 35 | | ＠current-change | 返回值：当前关键词索引（从1开始）。关键词改变的时候，如果搜索到内容，会返回1，搜索不到则返回0。 |
 36 | | ＠match-count-change | 	返回值：文本匹配关键词总数。 |
 37 | 
 38 | ## 组件方法，可以通过ref调用
 39 | 主要提供了关键词滚动到可视区域的方法：
 40 | | 方法名 | 参数 | 说明 |
 41 | | --- | --- | --- |
 42 | | searchNext | 无 | 下一个关键词滚动到可视区域 |
 43 | | searchLast | 无 | 上一个关键词滚动到可视区域 |
 44 | | scrollTo | index | 滚动到第index（从1开始）个关键词 |
 45 | 
 46 | ## 使用示例：
 47 | 效果在线预览：https://wintc.top/laboratory/#/search-highlight
 48 | 
 49 | 代码示例
 50 | ```html
 51 | <search-highlight
 52 |   class="search-highlight"
 53 |   ref="search"
 54 |   @current-change="currentChange"
 55 |   @match-count-change="matchCountChange"
 56 |   :content="content"
 57 |   :keyword="keyword">
 58 | </search-highlight>
 59 | 
 60 | <script>
 61 | import SearchHighlight from 'vue-search-highlight'
 62 | 
 63 | export default {
 64 |   components: {
 65 |     SearchHighlight
 66 |   },
 67 |   data () {
 68 |     return {
 69 |       currentIdx: 0,
 70 |       matchCount: 0,
 71 |       keyword: '明月',
 72 |       content: `
 73 |             春江花月夜
 74 |                 [唐] 张若虚
 75 |       春江潮水连海平，海上明<b>月</b>共潮生。
 76 |       滟滟随波千万里，何处春江无月明！
 77 |       江流宛转绕芳甸，月照花林皆似霰；
 78 |       空里流霜不觉飞，汀上白沙看不见。
 79 |       江天一色无纤尘，皎皎空中孤月轮。
 80 |       江畔何人初见月？江月何年初照人？
 81 |       人生代代无穷已，江月年年望相似。
 82 |       不知江月待何人，但见长江送流水。
 83 |       白云一片去悠悠，青枫浦上不胜愁。
 84 |       谁家今夜扁舟子？何处相思明<b>月</b>楼？
 85 |       可怜楼上月徘徊，应照离人妆镜台。
 86 |       玉户帘中卷不去，捣衣砧上拂还来。
 87 |       此时相望不相闻，愿逐月华流照君。
 88 |       鸿雁长飞光不度，鱼龙潜跃水成文。
 89 |       昨夜闲潭梦落花，可怜春半不还家。
 90 |       江水流春去欲尽，江潭落月复西斜。
 91 |       斜月沉沉藏海雾，碣石潇湘无限路。
 92 |       不知乘月几人归，落月摇情满江树。`,
 93 |     }
 94 |   },
 95 |   methods: {
 96 |     searchNext () {
 97 |       this.$refs.search.searchNext()
 98 |     },
 99 |     searchLast () {
100 |       this.$refs.search.searchLast()
101 |     },
102 |     matchCountChange (count) {
103 |       this.matchCount = count
104 |     },
105 |     currentChange (idx) {
106 |       this.currentIdx = idx
107 |     },
108 |     checkKeydown (event) {
109 |       if (event.shiftKey) {
110 |         this.searchLast()
111 |       } else {
112 |         this.searchNext()
113 |       }
114 |     }
115 |   }
116 | }
117 | </script>
118 | ```


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/changeLog.md:
--------------------------------------------------------------------------------
 1 | v 1.1.3
 2 |   - 修改了匹配函数，调用RegExp.prototype.exec匹配关键字而不是String.prototype.matchAll，兼容性更好。
 3 |   - 支持关键词构造正则表达式匹配。
 4 | 
 5 | v 1.1.0
 6 |   - 支持内容HTML字符串，支持关键词跨标签匹配
 7 |   - 更正了match-count-change事件的拼写错误
 8 | 
 9 | v 1.0.0
10 |   - 支持文本，关键词高亮


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-search-highlight",
 3 |   "version": "1.1.7",
 4 |   "keywords": [
 5 |     "搜索高亮",
 6 |     "vue",
 7 |     "关键字高亮"
 8 |   ],
 9 |   "author": "Lushenggang <lushg-tcxg@qq.com>",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/Lushenggang/vue-search-highlight"
13 |   },
14 |   "license": "MIT",
15 |   "main": "dist/vue-search-highlight.common.js",
16 |   "unpkg": "dist/vue-search-highlight.min.js",
17 |   "module": "dist/vue-search-highlight.esm.js",
18 |   "private": false,
19 |   "files": [
20 |     "dist"
21 |   ],
22 |   "scripts": {
23 |     "serve": "vue-cli-service serve",
24 |     "build": "vue-cli-service build",
25 |     "lint": "vue-cli-service lint",
26 |     "build-bundle": "vue-cli-service build --target lib --name vue-search-highlight ./src/index.js",
27 |     "prepublishOnly": "git push && npm run build-bundle"
28 |   },
29 |   "dependencies": {
30 |     "core-js": "^2.6.5",
31 |     "vue": "^2.6.10"
32 |   },
33 |   "devDependencies": {
34 |     "@vue/cli-plugin-babel": "^3.0.1",
35 |     "@vue/cli-plugin-eslint": "^3.0.1",
36 |     "@vue/cli-service": "^3.0.1",
37 |     "babel-eslint": "^10.0.1",
38 |     "eslint": "^5.16.0",
39 |     "eslint-plugin-vue": "^5.0.0",
40 |     "uglifyjs-webpack-plugin": "^2.2.0",
41 |     "vue-template-compiler": "^2.6.10"
42 |   },
43 |   "eslintConfig": {
44 |     "root": true,
45 |     "env": {
46 |       "node": true
47 |     },
48 |     "extends": [
49 |       "plugin:vue/essential",
50 |       "eslint:recommended"
51 |     ],
52 |     "rules": {},
53 |     "parserOptions": {
54 |       "parser": "babel-eslint"
55 |     }
56 |   },
57 |   "postcss": {
58 |     "plugins": {
59 |       "autoprefixer": {}
60 |     }
61 |   },
62 |   "browserslist": [
63 |     "> 1%",
64 |     "last 2 versions"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wintc23/vue-search-highlight/49df28a8bcf8dc92da1005e855506fd4ac671bc8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-search-highlight</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-search-highlight doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="container">
  4 |       <div class="header">
  5 |         <input type="text" v-model="keyword">
  6 |         <div class="match-num">{{ currentIdx }} / {{ matchCount }}</div>
  7 |         <button @click.stop="searchLast">上一个</button>
  8 |         <button @click.stop="searchNext">下一个</button>
  9 |       </div>
 10 |       <search-highlight
 11 |         class="search-highlight"
 12 |         ref="search"
 13 |         @current-change="currentChange"
 14 |         @match-count-change="matchCountChange"
 15 |         :content="content"
 16 |         regExp
 17 |         :keyword="keyword">
 18 |       </search-highlight>
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import SearchHighlight from './components/SearchHighlight.vue'
 25 | 
 26 | export default {
 27 |   name: 'app',
 28 |   components: {
 29 |     SearchHighlight
 30 |   },
 31 |   data () {
 32 |     return {
 33 |       keyword: '明月',
 34 |       currentIdx: 0,
 35 |       matchCount: 0,
 36 |       content: `
 37 |             春江花月夜
 38 |                 [唐] 张若虚
 39 |       春江潮水连海平，海上明<b>月</b>共潮生。
 40 |       滟滟随波千万里，何处春江无月明！
 41 |       江流宛转绕芳甸，月照花林皆似霰；
 42 |       空里流霜不觉飞，汀上白沙看不见。
 43 |       江天一色无纤尘，皎皎空中孤月轮。
 44 |       江畔何人初见月？江月何年初照人？
 45 |       人生代代无穷已，江月年年望相似。
 46 |       不知江月待何人，但见长江送流水。
 47 |       白云一片去悠悠，青枫浦上不胜愁。
 48 |       谁家今夜扁舟子？何处相思明<b>月</b>楼？
 49 |       可怜楼上月徘徊，应照离人妆镜台。
 50 |       玉户帘中卷不去，捣衣砧上拂还来。
 51 |       此时相望不相闻，愿逐月华流照君。
 52 |       鸿雁长飞光不度，鱼龙潜跃水成文。
 53 |       昨夜闲潭梦落花，可怜春半不还家。
 54 |       江水流春去欲尽，江潭落月复西斜。
 55 |       斜月沉沉藏海雾，碣石潇湘无限路。
 56 |       不知乘月几人归，落月摇情满江树。`,
 57 |     }
 58 |   },
 59 |   mounted () {
 60 |     let keywords = ['明月', '江', '春']
 61 |     const map = [...'\\[](){}?.+*^$:|'].reduce((r, c) => (r[c] = true, r), {})
 62 |     keywords = keywords.filter(word => word).map(word => {
 63 |       return word.split('').map(s => map[s] ? `\\${s}` : s).join('[\\s\\n]*')
 64 |     })
 65 |     this.keyword = keywords.join('|')
 66 |   },
 67 |   methods: {
 68 |     searchLast () {
 69 |       this.$refs.search.searchLast()
 70 |     },
 71 |     searchNext () {
 72 |       this.$refs.search.searchNext()
 73 |     },
 74 |     matchCountChange (count) {
 75 |       this.matchCount = count
 76 |     },
 77 |     currentChange (idx) {
 78 |       this.currentIdx = idx
 79 |     },
 80 |   }
 81 | }
 82 | </script>
 83 | 
 84 | <style>
 85 | #app {
 86 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 87 |   -webkit-font-smoothing: antialiased;
 88 |   -moz-osx-font-smoothing: grayscale;
 89 |   text-align: center;
 90 |   color: #2c3e50;
 91 |   display: flex;
 92 | }
 93 | body {
 94 |   margin: 0;
 95 | }
 96 | 
 97 | </style>
 98 | 
 99 | <style>
100 | 
101 | .container {
102 |   max-width: 30rem;
103 |   height: 100vh;
104 |   box-sizing: border-box;
105 |   margin: 0 auto;
106 |   display: flex;
107 |   flex-direction: column;
108 |   overflow: hidden;
109 | }
110 | 
111 | .header {
112 |   text-align: center;
113 |   display: flex;
114 |   height: 40px;
115 |   align-items: center;
116 |   flex-shrink: 0;
117 |   flex-wrap: wrap;
118 | }
119 | 
120 | button {
121 |   margin: 0 2px;
122 |   flex-shrink: 0;
123 | }
124 | 
125 | .search-highlight {
126 |   flex: auto;
127 |   max-height: 20em;
128 |   white-space: pre-line;
129 |   overflow: auto;
130 |   line-height: 2em;
131 | }
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wintc23/vue-search-highlight/49df28a8bcf8dc92da1005e855506fd4ac671bc8/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/SearchHighlight.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="search-highlight" v-html="contentShow">
  3 |   </div>
  4 | </template>
  5 | 
  6 | <script>
  7 | const PLUGIN_FLAG = 'search-hightlight_by_mumaa'
  8 | 
  9 | export default {
 10 |   props: {
 11 |     content: {
 12 |       type: String,
 13 |       default: ''
 14 |     },
 15 |     keyword: {
 16 |       type: String,
 17 |       default: ''
 18 |     },
 19 |     highlightStyle: {
 20 |       type: String,
 21 |       default: 'background: #ffff00'
 22 |     },
 23 |     currentStyle: {
 24 |       type: String,
 25 |       default: 'background: #ff9632'
 26 |     },
 27 |     regExp: {
 28 |       type: Boolean,
 29 |       default: false
 30 |     }
 31 |   },
 32 |   data () {
 33 |     return {
 34 |       lightIndex: 0,
 35 |       matchCount: 0,
 36 |       contentShow: '',
 37 |       random: `${Math.random()}`.slice(2)
 38 |     }
 39 |   },
 40 |   computed: {
 41 |     watchString () {
 42 |       return [this.content, this.keyword]
 43 |     },
 44 |     watchStyle () {
 45 |       return [this.lightIndex, this.highlightStyle, this.currentStyle]
 46 |     },
 47 |     flag () {
 48 |       return `${PLUGIN_FLAG}${this.random}`
 49 |     },
 50 |     styleSelector () {
 51 |       return `style[${this.flag}]`
 52 |     },
 53 |   },
 54 |   watch: {
 55 |     watchString: {
 56 |       immediate: true,
 57 |       handler () {
 58 |         this.replaceKeywords()
 59 |       }
 60 |     },
 61 |     watchStyle: {
 62 |       immediate: true,
 63 |       handler () {
 64 |         this.setStyle()
 65 |       }
 66 |     },
 67 |     lightIndex: {
 68 |       immediate: true,
 69 |       handler () {
 70 |         this.$emit('current-change', this.lightIndex)
 71 |       }
 72 |     },
 73 |     matchCount: {
 74 |       immediate: true,
 75 |       handler () {
 76 |         this.$emit('match-count-change', this.matchCount)
 77 |       }
 78 |     }
 79 |   },
 80 |   beforeDestroy () {
 81 |     this.clearStyle()
 82 |   },
 83 |   methods: {
 84 |     getTextNodeList (dom) {
 85 |       const nodeList = [...dom.childNodes]
 86 |       const textNodes = []
 87 |       while (nodeList.length) {
 88 |         const node = nodeList.shift()
 89 |         if (node.nodeType === node.TEXT_NODE) {
 90 |           node.wholeText && textNodes.push(node)
 91 |         } else {
 92 |           nodeList.unshift(...node.childNodes)
 93 |         }
 94 |       }
 95 |       return textNodes
 96 |     },
 97 | 
 98 |     getTextInfoList (textNodes) {
 99 |       let length = 0
100 |       const textList = textNodes.map(node => {
101 |         let startIdx = length, endIdx = length + node.wholeText.length
102 |         length = endIdx
103 |         return {
104 |           text: node.wholeText,
105 |           startIdx,
106 |           endIdx
107 |         }
108 |       })
109 |       return textList
110 |     },
111 | 
112 |     getMatchList (content, keyword) {
113 |       if (!this.regExp) {
114 |         const characters = [...'\\[](){}?.+*^$:|'].reduce((r, c) => (r[c] = true, r), {})
115 |         keyword = keyword.split('').map(s => characters[s] ? `\\${s}` : s).join('[\\s\\n]*')
116 |       }
117 |       const reg = new RegExp(keyword, 'gmi')
118 |       const matchList = []
119 |       let match = reg.exec(content)
120 |       while (match) {
121 |         matchList.push(match)
122 |         match = reg.exec(content)
123 |       }
124 |       return matchList
125 |     },
126 | 
127 |     replaceMatchResult (textNodes, textList, matchList) {
128 |       // 对于每一个匹配结果，可能分散在多个标签中，找出这些标签，截取匹配片段并用font标签替换出
129 |       for (let i = matchList.length - 1; i >= 0; i--) {
130 |         const match = matchList[i]
131 |         const matchStart = match.index, matchEnd = matchStart + match[0].length // 匹配结果在拼接字符串中的起止索引
132 |         // 遍历文本信息列表，查找匹配的文本节点
133 |         for (let textIdx = 0; textIdx < textList.length; textIdx++) {
134 |           const { text, startIdx, endIdx } = textList[textIdx] // 文本内容、文本在拼接串中开始、结束索引
135 |           if (endIdx < matchStart) continue // 匹配的文本节点还在后面
136 |           if (startIdx >= matchEnd) break // 匹配文本节点已经处理完了
137 |           let textNode = textNodes[textIdx] // 这个节点中的部分或全部内容匹配到了关键词，将匹配部分截取出来进行替换
138 |           const nodeMatchStartIdx = Math.max(0, matchStart - startIdx) // 匹配内容在文本节点内容中的开始索引
139 |           const nodeMatchLength = Math.min(endIdx, matchEnd) - startIdx - nodeMatchStartIdx // 文本节点内容匹配关键词的长度
140 |           if (nodeMatchStartIdx > 0) textNode = textNode.splitText(nodeMatchStartIdx) // textNode取后半部分
141 |           if (nodeMatchLength < textNode.wholeText.length) textNode.splitText(nodeMatchLength)
142 |           const font = document.createElement('font')
143 |           font.setAttribute(this.flag, i + 1)
144 |           font.innerText = text.substr(nodeMatchStartIdx, nodeMatchLength)
145 |           textNode.parentNode.replaceChild(font, textNode)
146 |         }
147 |       }
148 |     },
149 | 
150 |     replaceKeywords () {
151 |       let errFlag = false
152 |       if (this.regExp) {
153 |         try {
154 |           const reg = new RegExp(this.keyword)
155 |           if (reg.test('')) errFlag = true
156 |         } catch (err) {
157 |           errFlag = true
158 |         }
159 |       }
160 |       if (errFlag || !this.keyword) {
161 |         this.matchCount = 0;
162 |         this.lightIndex = 0;
163 |         this.contentShow = this.content
164 |         return
165 |       }
166 |       const div = document.createElement('div')
167 |       div.innerHTML = this.content
168 |       const textNodes = this.getTextNodeList(div)
169 |       const textList = this.getTextInfoList(textNodes)
170 |       const content = textList.map(({ text }) => text).join('')
171 |       const matchList = this.getMatchList(content, this.keyword)
172 |       this.matchCount = matchList.length
173 |       this.lightIndex = this.matchCount ? 1 : 0
174 |       this.replaceMatchResult(textNodes, textList, matchList)
175 |       this.contentShow = div.innerHTML
176 |     },
177 |     scrollTo (index) {
178 |       this.$nextTick(() => {
179 |         let node = this.$el.querySelector(`font[${this.flag}='${index}']`)
180 |         if (node) {
181 |           this.lightIndex = index
182 |           node.scrollIntoView()
183 |         }
184 |       })
185 |     },
186 |     searchNext () {
187 |       this.$nextTick(() => {
188 |         let idx = this.lightIndex >= this.matchCount ? 1 : this.lightIndex + 1
189 |         this.scrollTo(idx)
190 |       })
191 |     },
192 |     searchLast () {
193 |       this.$nextTick(() => {
194 |         let idx = this.lightIndex <= 1 ? this.matchCount : this.lightIndex - 1
195 |         this.scrollTo(idx)
196 |       })
197 |     },
198 |     setStyle () {
199 |       let style = document.head.querySelector(this.styleSelector)
200 |       if (!style) {
201 |         style = document.createElement('style')
202 |         style.setAttribute(this.flag, 1)
203 |       }
204 |       style.innerText = `font[${this.flag}]{${this.highlightStyle}}font[${this.flag}='${this.lightIndex}']{${this.currentStyle}}`
205 |       document.head.appendChild(style)
206 |     },
207 |     clearStyle () {
208 |       let style = document.head.querySelector(this.styleSelector)
209 |       style && document.head.removeChild(style)
210 |     }
211 |   }
212 | }
213 | </script>
214 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import SearchHighlight from '@/components/SearchHighlight'
2 | 
3 | export default SearchHighlight
4 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const UglifyJsPlugin=require('uglifyjs-webpack-plugin')
 3 | const isDev = process.env.NODE_ENV !== "production"
 4 | 
 5 | const externals = {}
 6 | !isDev && (externals.vue = 'vue')
 7 | 
 8 | module.exports = {
 9 |   productionSourceMap: false,
10 |   configureWebpack: {
11 |     externals,
12 |     optimization: {
13 |       minimizer: [
14 |         new UglifyJsPlugin({
15 |           uglifyOptions: {
16 |             output: {
17 |               comments: false,
18 |             },
19 |             warnings: false,
20 |             compress: {
21 |               drop_debugger: true,
22 |               drop_console: true
23 |             }
24 |           }
25 |         })
26 |       ]
27 |     }
28 |   }
29 | }


--------------------------------------------------------------------------------