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为搜索框中的value
console.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>
<td
contenteditable
v-model="key.ucontent"
v-bind:keys="key.id"
class="audiot_style"
>{{key.ucontent}}</td>
</tr>
</table>
</div>
data()和vuex的传值就先不赘述了,vue传值看这里
vue中搜索关键词,使文本标红的更多相关文章
- vue中引入Tinymce富文本编辑器
最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...
- Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap
其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...
- vue中使用kindeditor富文本编辑器
1.去官网下载kindeditor 2.将其放在一个名为kindeditor的文件夹里,并且将它放在vue里的static文件夹下 3.创建kindeditor.vue <template> ...
- vue中使用markdown富文本,并在html页面中展示
想给自己的后台增加一个markdown编辑器,下面记录下引用的步骤 引入组件mavon-editor 官网地址:https://github.com/hinesboy/mavonEditor // 插 ...
- vue中使用kindeditor富文本编辑器2
第一步,下载依赖 yarn add kindeditor 第二步,建立kindeditor.vue组件 <template> <div class="kindeditor& ...
- 在vue中后台返回的文本包含标签时候解析为html代码
1.数据格式: str=‘<p>11111</p>' 解析方式一: <p v-html="str">{{str}}</p> 解析方式 ...
- vue中TinyMCE图片 “data-mce-src” 属性的问题
1.问题 在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个"data-mcee-src" 属性,而保存时实际也是保存的"data-mc ...
- 基于vue实现搜索高亮关键字
有一个需求是在已有列表中搜索关键词,然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示,所以该需求需要解决的就两个问题: 1.搜索关键词过滤列表数据 2.每个列表高亮关键字 ps: 此问题 ...
- 【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词
一.搜素效果如下: 二.核心 1)利用oninput属性来触发搜素功能 2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class ...
随机推荐
- Spring Cloud架构教程 (八)消息驱动的微服务(消费组)【Dalston版】
使用消费组实现消息消费的负载均衡 通常在生产环境,我们的每个服务都不会以单节点的方式运行在生产环境,当同一个服务启动多个实例的时候,这些实例都会绑定到同一个消息通道的目标主题(Topic)上. 默认情 ...
- 进阶2:Hadoop 环境搭建: hadoop3.1.1 jdk1.8 在centos6.5上的伪分布式安装
参考文章: https://blog.csdn.net/qq_38038143/article/details/82779016 https://blog.csdn.net/m0_37461645/a ...
- Hello Kotlin! Kotlin学习资料
今天谷歌搞了条大新闻.宣布Kotlin成为android开发的一级(One Class)语言,这说明谷歌是被甲骨文恶心坏了,打算一步步脱离掉java或者说是甲骨文公司的束缚了.原先网上大家还琢磨着会不 ...
- linux 杀掉僵尸进程 (zombie process, defunct)
本文说明为什么会出现僵尸进程 (zombie process, defunct),以及如何杀掉僵尸进程 1. 为什么有僵尸进程 僵尸进程出现在父进程没有回收子进程的 PCB 的时候,这个时候子进程已经 ...
- C\C++语言中的宏多重展开和递归展开
宏定义中的#,## 1. 宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组 2.记号粘贴操作符(token paste operator): ## “## ...
- 【转】最全的 pip 使用指南,50% 你可能没用过
[转]最全的 pip 使用指南,50% 你可能没用过 所有的 Python 开发者都清楚,Python 之所以如此受欢迎,能够在众多高级语言中,脱颖而出,除了语法简单,上手容易之外,更多还要归功于 P ...
- day49—JavaScript阻止浏览器默认行为
转行学开发,代码100天——2018-05-04 今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作.比如右键菜单的行为. 阻止默认行为的语句为: return false; 例如,阻 ...
- EntityFrameworkCore.MySql
1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装以下几个包 Mysql 版本: Install-Package MySql.Data.EntityFramew ...
- Linux_LDAP+NFS+autofs
目录 目录 前言 Ldap LDAPNFSautofs ServerPost 前言 LDAP+NFS+Autofs也是一种网络用户集中管理解决方案,相对于NIS+NFS+Autofs而言,有着更可靠的 ...
- js面向对象程序设计之继承
在面向对象语言中继承分成两种:接口继承和实现继承.解释一下,接口继承只继承方法的签名,而实现继承则是继承实际的方法.但是ECMAScript中的函数没有签名所以无法进行接口继承,只能是实现实现继承.而 ...