vue中搜索关键词,使文本标红

UserHead.vue中搜索框:

<!-- 搜索 --><el-col :span="6" :offset="8" class="search"><el-input placeholder="请输入内容" v-model="inputvalue" class="input-with-select"><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input></el-col>

与button绑定的事件:

search() {//translateText为从vuex穿过来的对话内容；// inputvalue为搜索框中的valueconsole.log(this.translateText);console.log(this.inputvalue);// 获取所有对话内容的dom节点var audiot_style = document.getElementsByClassName("audiot_style");var translateText = this.translateText;var inputvalue = this.inputvalue;// 遍历所有对话文本内容for (let i = 0; i < translateText.length; i++) {// 当对话内容中有包含搜索框中的字符串时if (translateText[i].ucontent.indexOf(inputvalue) >= 0) {// 先将包含关键字的对话内容拆分为数组var values = translateText[i].ucontent.split(inputvalue);// 然后再以一段设置了css样式的标签为分隔符,将数组拼接为字符串// 再赋值给对应的dom,让其节点的innerhtml为这个字符串audiot_style[i].innerHTML = values.join('<span style="color:red;">' + inputvalue + "</span>");}}

Userfile.vue中的文本内容:

<div class="translate_content"><table v-for="key in mobj"><tr><td class="td_user">{{key.uname}}--{{key.utime}}{{count}}</td></tr><tr><tdcontenteditablev-model="key.ucontent"v-bind:keys="key.id"class="audiot_style">{{key.ucontent}}</td></tr></table></div>

data()和vuex的传值就先不赘述了,vue传值看这里

vue中搜索关键词,使文本标红相关推荐

js实现html搜索关键词高亮显示（标红）
效果图: 一.只适用于找出中文如果传入英文会特别麻烦,因为比如传个a,innerHtml匹配时会匹配到包含a的标签比如<span>.<a>等. 思路: 获取body的inne ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
C#中搜索关键词高亮显示
在搜索关键词高亮中一般的方法都是采用替换的办法(Replace)这个方法有一个缺点就是不能区分大小写的问题.在网上找了找发现有人用正则表达式的方法来解决这个问题还真不错,效率也比较高,归纳如下,有用得 ...
论文中表格查重被标红怎么办？如何修改
为了能够更清楚地表达自己,我们的论文中不可避免地使用各种类型的表格.因此我们也需要特别注意表格查重的问题,表格中含的数字和文字也会被算作论文查重比对对象,所以企业肯定是会被算作论文查重比对研究对象的. ...
bootstrap-table表格通过关键字查询并且条件筛选，表格中出现的关键字都标红
获取表格行数 $("#tableId").find("td").length; 获取当前行的列数 $("#exampleTable tr") ...
c语言在txt文件中搜索关键词_网络推广外包—网络推广外包如何在搜索引擎中体现关键词优化效果...
在当下的互联网时代中,没有企业愿意远离这种流量获取快.用户需求大.宣传推广能力见效快的搜索引擎,况且通过互联网的帮助下,企业网站能够通过搜索引擎进行关键词优化后获取更多的转化率,增加企业交易额度的提升 ...
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1.最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框. 自定义添加菜单功能如下: cnpm i ...
Vue 中使用 Tinymce 富文本编辑器
参考链接:https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器一. 下载 npm ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...

vue中搜索关键词,使文本标红

vue中搜索关键词,使文本标红相关推荐

最新文章

热门文章