标签：map search vue 高亮 keyword content 关键字 keywords word

<template>
<div id="app">
<div class="container">
<div class="header">
<input type="text" v-model="keyword">
<div class="match-num">{{ currentIdx }} / {{ matchCount }}</div>
<button @click.stop="searchLast">上一个</button>
<button @click.stop="searchNext">下一个</button>
</div>
<search-highlight
class="search-highlight"
ref="search"
@current-change="currentChange"
@match-count-change="matchCountChange"
:content="content"
regExp
:keyword="keyword">
</search-highlight>
</div>
</div>
</template>

<script>
import SearchHighlight from './components/SearchHighlight.vue'

export default {
name: 'app',
components: {
SearchHighlight
},
data () {
return {
keyword: '明月',
currentIdx: 0,
matchCount: 0,
content: `
春江花月夜
[唐] 张若虚
春江潮水连海平，海上明<b>月</b>共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月？江月何年初照人？
人生代代无穷已，江月年年望相似。
不知江月待何人，但见长江送流水。
白云一片去悠悠，青枫浦上不胜愁。
谁家今夜扁舟子？何处相思明<b>月</b>楼？
可怜楼上月徘徊，应照离人妆镜台。
玉户帘中卷不去，捣衣砧上拂还来。
此时相望不相闻，愿逐月华流照君。
鸿雁长飞光不度，鱼龙潜跃水成文。
昨夜闲潭梦落花，可怜春半不还家。
江水流春去欲尽，江潭落月复西斜。
斜月沉沉藏海雾，碣石潇湘无限路。
不知乘月几人归，落月摇情满江树。`,
}
},
mounted () {
let keywords = ['明月', '江', '春']
const map = [...'\\[](){}?.+*^$:|'].reduce((r, c) => (r[c] = true, r), {})
keywords = keywords.filter(word => word).map(word => {
return word.split('').map(s => map[s] ? `\\${s}` : s).join('[\\s\\n]*')
})
this.keyword = keywords.join('|')
},
methods: {
searchLast () {
this.$refs.search.searchLast()
},
searchNext () {
this.$refs.search.searchNext()
},
matchCountChange (count) {
this.matchCount = count
},
currentChange (idx) {
this.currentIdx = idx
},
}
}
</script>

标签：map,search,vue,高亮,keyword,content,关键字,keywords,word
来源： https://www.cnblogs.com/zhyp/p/16593680.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。