web端 让内容中与搜索内容一样的文字，进行突出显示(改变颜色)

有时候我们会遇到一种奇葩需求：在搜索页面，搜索结果的数据中展示的内容肯定包含搜索关键词的，但是现在需要将搜索关键词在搜索结果中突出展示出来

例如：

这种我们该怎么做呢？

解决思路：将需要突出展示的内容从字符串变为富文本

<div class="searchGoodsLine" v-for="(item,index) in searchGoodsList"> 
    <div ref="highLightBox" v-html="highLightText('文本内容', '高亮关键词')"></div> 
</div>

highLightText(text, keywords) {
			/*
			text: 文本内容
			keywords: 关键词
			*/
			// 如果没有文本，直接结束函数
			if (!text) {
				return;
			}
			// 如果没有关键词，直接返回原文本
			if (!keywords) {
				return text;
			}
			let inputvalue = keywords.replace(/\s+/g, '|'); // 把空格替换成正则表达式的或操作符
			let reg = new RegExp(`(${inputvalue})`, 'g'); // 创建正则表达式
			// 把匹配到的关键词用 span 标签包裹起来，并添加样式
			let highlightedText = text.replace(
				reg,
				`<span style="color: blue; cursor: pointer;">$1</span>`
			);
			return highlightedText;
		},

扩展：

有时候还会附加一个需求：需要将突出展示的内容赋予一个点击事件

我的点击事件是进行跳转百度搜索关键词，这个可以根据业务具体需求进行更改

highLightText(text, keywords) {
			/*
			text: 文本内容
			keywords: 关键词
			*/
			// 如果没有文本，直接结束函数
			if (!text) {
				return;
			}
			// 如果没有关键词，直接返回原文本
			if (!keywords) {
				return text;
			}
			let inputvalue = keywords.replace(/\s+/g, '|'); // 把空格替换成正则表达式的或操作符
			let reg = new RegExp(`(${inputvalue})`, 'g'); // 创建正则表达式
			// 把匹配到的关键词用 span 标签包裹起来，并添加样式
			let highlightedText = text.replace(
				reg,
				`<span style="color: blue; cursor: pointer;">$1</span>`
			);
                  // 在 DOM 更新后绑定点击事件
			this.$nextTick(() => {
				let spans = this.$refs.highLightBox.querySelectorAll('span');
				for (let i = 0; i < spans.length; i++) {
					spans[i].addEventListener('click', () => {
						this.highLightTextClick(spans[i].textContent);
					});
				}
			});
			return highlightedText;
		},
		highLightTextClick(keyword) {
			window.open(`https://www.baidu.com/s?wd=${keyword}`); // 在新窗口中打开百度搜索
		},