搜索关键词高亮

搜索关键字高亮

如何将字符串中的指定字符在网页中高亮展示？

"Hello World";

将需要高亮的字符包裹 HTML 标签，为其单独设置颜色。

"Hello <span style="color: red">World</span>"

在 Vue 中如何渲染带有 HTML 标签的字符串？

data () {
  return {
    htmlStr: 'Hello <span style="color: red">World</span>'
  }
}

<div>{{ htmlStr }}</div>
<div v-html="htmlStr"></div>

如何把字符串中指定字符统一替换为高亮（包裹了 HTML）的字符？

const str = "Hello World"

// 结果：<span style="color: red">Hello</span> World
"Hello World".replace('Hello', '<span style="color: red">Hello</span>')

// 需要注意的是，replace 方法的字符串匹配只能替换第1个满足的字符
// <span style="color: red">Hello</span> World Hello abc
"Hello World Hello abc".replace('Hello', '<span style="color: red">Hello</span>')

// 如果想要全文替换，使用正则表达式
// g 全局
// i 忽略大小写
// <span style="color: red">Hello</span> World <span style="color: red">Hello</span> abc
"Hello World Hello abc".replace(/Hello/gi, '<span style="color: red">Hello</span>')

一个小扩展：使用字符串的 split 结合数组的 join 方法实现高亮

var str = "hello world 你好 hello";

// ["", " world 你好 ", ""]
const arr = str.split("hello");

// "<span>hello</span> world 你好 <span>hello</span>"
arr.join("<span>hello</span>");

下面是具体的处理。

1、在 methods 中添加一个方法处理高亮

// 对输入的搜索词进行高亮
// text 搜索的结果列表
// this.searchText 输入的搜索关键字
heighlight(text) {
	const heighlightStr = `<span class="active">${this.searchText}</span>`
	// 正则表达式 // 中间的内容都会被当做匹配字符来使用 而不是数据变量
	// 如果需要根据数据变量动态的创建正则表达式 则手动 new RegExp
	// RegExp 正则表达式构造函数,是原生 JavaScript 的内置构造函数
	// 参数一: 匹配模式字符串 他会根据这个字符串创建正则对象
	// 参数二: 匹配模式, 要写到字符串中,g 全局，i 忽略大小写
	const reg = new RegExp(this.searchText, 'gi')
	return text.replace(reg, heighlightStr)
}

2、然后在联想建议列表项中绑定调用

<!-- 联想建议 -->
<van-cell icon="search" v-for="(v, i) in searchMessages" :key="i" @click="$emit('search', v)">
		<div slot="title" v-html="heighlight(v)"></div>
	</van-cell>
<!-- /联想建议 -->