### Taro@3.3.3最新版本开发企业级出行项目前端完成搜索并高亮文字的两种方式
在做文字处置的项目时经常会遇到搜索文字并高亮的需求,常见的完成方式有插入标签和贴标签两种。这两种方式适用于不同的场景,各有优劣。为了便当操作,直接起一个Vue项目,在里面演示。
插入标签的方式简单做一个规划,handleSearch 中放主要逻辑
<script setup>import { ref } from 'vue'const text = ref('豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,宾客盈门。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路知名区;童子何知,躬逢胜饯。')const search = ref('')const handleSearch = () => { console.log(search.value)}</script><template> <div class="editor">{{ text }}</div> <input type="text" v-model="search"> <button @click="handleSearch">搜索</button></template><style scoped>.editor { width: 200px; height: 200px; border: 1px solid #ddd; overflow: auto;}</style>复制代码补充 handleSearch 的处置逻辑:
const handleSearch = () => { const regExp = new RegExp(search.value, 'g') text.value = text.value.replace(regExp, `${search.value}`)}复制代码用输入框中的内容创立一个正则,然后将内容做交换,外面裹上 span 标签并加背景颜色。
对 editor 稍作修正,否则标签渲染不出来
<div class="editor" v-html="text"></div>
贴标签的方式这种方式需求两个前置的学问储藏,一个是 Document.createRange() ,该办法用以创立一个包含节点与文本节点的一局部的文档片段。另一个是 Range.getBoundingClientRect() ,固然是一个实验中的办法,但是主流阅读器根本都支持,该办法会返回一个 DOMRect 对象,包含8个属性,文档中有细致的引见,在此就不赘述了。
对页面稍作修正:
<script setup>import { ref, watch, onMounted } from 'vue'const text = ref('豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,宾客盈门。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路知名区;童子何知,躬逢胜饯。')const search = ref('')const highlight = ref([])const editorRef = ref(null)const wrapperRef = ref(null)const handleSearch = () => { }</script><template> <div class="container"> <div class="wrapper" ref="wrapperRef"> <div class="editor" ref="editorRef" contenteditable>{{ text }}</div> <div class="highlight"></div> </div> </div> <input type="text" v-model="search"> <button @click="handleSearch">搜索</button></template><style scoped>.container { width: 200px; height: 200px; border: 1px solid #ddd; overflow: auto;}.wrapper { position: relative;}.highlight { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1;}</style>复制代码增加了一个 highlight 框,用来寄存高亮的块, highlight 数组用来寄存需求高亮的块的位置信信息。
补充搜索函数中的逻辑
const len = search.value.lengthconst regExp = new RegExp(search.value, 'g')const textNode = editorRef.value.firstChildlet result = nullwhile (result = regExp.exec(text.value)) { const { index } = result const range = document.createRange() range.setStart(textNode, index) range.setEnd(textNode, index + len) const rangeReact = range.getBoundingClientRect() highlight.value.push(rangeReact)}
download链接:https://pan.baidu.com/s/1uazZpyH_m2LCaWBg5Pgq-Q?pwd=n0az
提取码:n0az
--来自百度网盘超级会员V4的分享