### 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 {  ;  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 {  ;  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的分享