搜索关键字高亮 | 处理方法

最新推荐文章于 2024-09-30 15:42:36 发布

malou_L

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量76

点赞数

文章标签：正则表达式前端

本文链接：https://blog.csdn.net/m0_74228110/article/details/130275043

版权

文章介绍了JavaScript中的RegExp构造函数，用于根据匹配模式字符串和匹配模式创建正则表达式。当需要根据变量生成正则时，应使用此构造函数。文中提供了一个示例，展示了如何结合方法实现文本高亮，尤其是在搜索建议列表中动态高亮搜索关键字。

摘要由CSDN通过智能技术生成

RegExp正则表达式构造函数

RegExp 是原生 JavaScript 的内置构造函数

正则表达式 // 中间的内容都会当作匹配字符来使用，而不是数据变量，如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp

RegExp 正则表达式构造函数

RegExp(this.searchText,'gi')

参数1：匹配模式字符串，它会根据这个字符串创建正则对象
参数2：匹配模式，要写到字符串中 g 全局，i 忽略大小写

<template>

<div class="search-suggestion">

<van-cell

icon="search"

v-for="(text , index) in suggestions"

:key="index"

@click="$emit('search',text)"

>

<div slot="title" v-html="heighLight(text)"></div>

</van-cell>

</div>

</template>

methods:{

heighLight(text) {

const heighLightStr = `<span class="active">${this.searchText}</span>`

// 不加上这个判断浏览器会报错！！

if (!text || typeof text !== 'string' || !this.searchText) {

return text;

}

const reg = new RegExp(this.searchText,'gi')

return text.replace(reg,heighLightStr)

}

}