原生Js通过正则对搜索的内容进行高亮显示

2019-03-22309次阅读

正则表达式是字符串处理工具中强有力的工具。这里介绍的是字符串的replace方法第一个参数正则表达式 ,来实现搜索关键字高亮的功能。整个过程分为2步:

  1. 创建带有变量的正则表达式
  2. replace方法替换

先了解一下创建正则表达式有几种方式

1,采用new运算符

var reg = new RegExp('参数字符串','可选模式修饰符')

2,字面量法

var reg=/参数字符串/可选模式修饰符;

模式修饰符参数
i 忽略大小写
g 全局匹配
m 多行匹配

String.prototype.replace()

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。详细了解>>

搜索的内容关键词高亮显示代码实现

const key = document.getElementById('key');
const reg = new RegExp("("+ key +")","ig");
const content = document.getElementById('content');
content.innerHTML = content.innerHTML.replace(reg,'<em class="gighlight">$1</em>');

 

上一篇: 记录一下Win7下IE11右下角Edge不可点解决方法  下一篇: 复制文章内容的时候,自动在复制文字后面加上版权声明  

原生Js通过正则对搜索的内容进行高亮显示相关文章