基于 React + Redux/Mobx 搞定复杂项目状态管理
前端完成搜索并高亮文字的两种方式
在做文字处置的项目时经常会遇到搜索文字并高亮的需求，常见的完成方式有插入标签和贴标签两种。这两种方式适用于不同的场景，各有优劣。为了便当操作，直接起一个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>
复制代码
