前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)

问题背景：

网上搜索关于搜索结果高亮显示，基本上都是单一关键字搜索，或者多关键字搜索，但是没有解决
输入英文字符时，把html标签渲染出来的问题，比如在进行多关键字搜索时，可能会进行a;s的搜索，
就可能把span标签进行解析再高亮显示，这样就会出现数据渲染时带出html的高亮。

报错如图所示:

解决思路

因为是多关键字搜索，首先考虑的是把关键词转换为一个数据，把关键词和文本信息进行一次循环比对，
发现是重复的，就进行高亮显示，如果之前的第一个关键词已经关键词显示，那么此时文本已经存在了
html标签，这个时候把html标签转化为一个特殊的符号，把这些所有的特殊符号的代表内容放如到一个数组内，
再紧接着高亮渲染html标签，完成后，把原先特殊符号进行替换，依次替换成需要显示的html标签，即可。

解决方法

通过搜索归纳，我们可以使用如下的方法解决多关键字搜索结果高亮的问题。

<div id="content">aaaaassssaaassddddwwwssaaa
</div><script>function hightLight() {let textEle = document.getElementById('content');  //获取文本内容；var text = textEle.innerHTMLlet searchKeywords = 's;a;w';  //为了方便演示，这里关键词直接写死searchKeywords = searchKeywords.replace(/;|；/g, ',');let searchArray = [];searchArray = searchKeywords.split(',');//把关键词列为一个数组searchArray.forEach((keyword) => {  //循环关键词数组if (keyword && text.indexOf(keyword) !== -1) {let regHtml = new RegExp("\<.*?\>", "ig"); //定义html正则let dealHtml = text.match(regHtml);  //符合的html定义一个数组let num = -1;text = text.replace(regHtml, '{~}'); //用一个特殊字符进行替换text = text.replace(new RegExp(keyword, 'g'), `<span style="color:#1890FF;">${keyword}</span>`);//把原来~代表的html标签，再替换回来text = text.replace(/{~}/g, function () {num++;return dealHtml[num];  //进行依次替换});}})textEle.innerHTML = text;}hightLight();
</script>

效果图

可以看到把所有的英文都高亮的出来，并且没有显示html.

前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)相关推荐

html5 可拖动悬浮按钮,前端vue开发：可移动的悬浮按钮的应用
前端vue开发:可移动的悬浮按钮的应用. class="callback float" @click="onClick" @mousedown="do ...
前端vue开发连续签到功能
前端vue开发连续签到功能 UI设计图参数说明 HTML部分渲染已经签到过的天数 js代码签到功能前端只需要调用两个接口完整代码 UI设计图参数说明 days_num:已经签到多少天 tod ...
vue开发的微信服务号的H5网页禁止点击时页面放大或者缩小
vue开发的微信服务号问题:点击H5页面时,页面会放大 ,不能固定解决方案: 1.在index.html 页面添加以下代码 width=device-width :表示宽度是设备屏幕的宽度 in ...
iOS备忘录之如何去掉苹果自带输入法输入英文时的“空格”
背景:苹果自带键盘输入英文时,中间会有"空格". 解决方法:"空格"的字符为"8198". NSString *checker = [NSS ...
input文本框实现输入英文时自动触发事件,输入中文时要输入完成后才触发事件
需求: 英文(英文输入法): 每输入一个字母都触发一次事件; 中文(拼音输入法): 输入完成后才触发事件,不是每打一个拼音就触发实现: $(function(){var flag = true;$( ...
Web前端-vue 开发命名规范
1.views 命名 views 文件夹下面是由以页面为单位的 vue 文件或者模块文件夹组成的放在 src 目录之下,与 components.assets 同级目录解析目录/文件说 ...
前端vue开发项目中的技术框架【简单推荐】
PC管理后台类型技术选用: vue + element-ui 选择理由: 选择vue的原因概述:前端主流MVVM框架, vue相对react写起来更方便,vue比react更容易上手,vue文档完 ...
前端vue开发页面按钮字体颜色白色或文本框不存在谷歌
第一种情况:使用elementui按钮组件结果:里面字体白色: 第二种情况:添加了input输入框结果不显示解决方法:查看右上角是否有插件icon 如果有的话把正在执行的插件(一般是流氓广告)移除 ...
vue学习之textarea输入英文时换行
需求:在使用textarea标签时,我们需要将英文单词进行截断处理,使其换行,如何实现? 解决方法:给textarea增加 word-break:break-all 属性即可,这个属性会对处于末尾的单 ...

前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)

问题背景：

解决思路

解决方法

效果图

前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)相关推荐

最新文章

热门文章