JavaScript正则方法replace实现搜索关键字高亮

原创 2017年09月17日 23:10:38

前言

正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它.
这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.

先介绍一下正则表达式的replace方法
replace介绍

w3school原文链接介绍

正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键,

var str = "asad sad 123 sd qwe21";
str.replace(/\d+/img,"数字");
//这里正确的匹配到了数字,且替换成了中文的数字
console.log(str);//"asad sad 数字 sd qwe数字"

------------------------------------------------------
//看一下如何使用$1,表示被捕获的字符串
var str = "asad sad 123 sd qwe21";

str.replace(/\d+/img,"数字$1数字");
console.log(str);//"asad sad 数字$1数字 sd qwe数字$1数字"
//很显然并没有成功,$1 还是$1,那么如何正确使用呢?

------------------------------------------------------
var str = "asad sad 123 sd qwe21";

str.replace(/(\d+)/img,"数字$1数字");
//这里就正确的匹配了数字并且用$1 表示原字符串并替换
console.log(str);///"asad sad 数字123数字 sd qwe数字21数字"
/*
()在正则里面表示捕获性元组,可以用$1 特殊字符来表示被替换的内容,可以有多个()元组,也就是可以有多个$1,$2 */

开始小试身手

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
 <style>
 b{
 color:red;
 }
 </style>
<div id="poetry">
春江花月夜<br>
作者:张若虚<br>
春江潮水连海平,海上明月共潮生。 <br>
滟滟随波千万里,何处春江无月明! <br>
江流宛转绕芳甸,月照花林皆似霰; <br>
空里流霜不觉飞,汀上白沙看不见。 <br>
江天一色无纤尘,皎皎空中孤月轮。 <br>
江畔何人初见月?江月何年初照人? <br>
人生代代无穷已,江月年年只相似。 <br>
</div>
<input type ="text" id="input" />
</body>
</html>
<script>
//input 输入要查找的字符串
input.onchange = function(){
    //获取要查找的字符串
    var searchVal = input.value;
    // 获取要查找的内容
    var text = poetry.innerHTML;
    //将之前的查找高亮的字符串,取消高亮
    text = text.replace(/<b[^>]*>([^>]*)<\/b[^>]*>/ig,"$1");
    poetry.innerHTML = text;
    //初始化正则表达式,加上括号(),形成可捕获元组.ig表示全局匹配和不区分大小写
    var reg = new RegExp("("+searchVal +")","ig");
    //高亮要查找的字符串
    text = text.replace(reg,"<b>$1</b>");
    poetry.innerHTML = text;
}

</script>

完整代码如上,小伙伴们可以自己复制过去直接运行,有不懂的小伙伴可以留言.
自然如有疏漏之处欢迎大家修改指正

版权声明:本文为博主原创文章,未经博主允许不得转载。

Asp.net 中高亮显示搜索关键字简单方法

今天用到搜索时的高亮显示,百度了一下,如下面: 1.替换关键字,对字体变色。         public static string ReplaceRed(string strtit...
  • orichisonic
  • orichisonic
  • 2015年09月23日 13:42
  • 1244

asp.net中利用Lucene.net实现检索并对检索关键字高亮显示

Lucene.NET是一个全文搜索框架,而不是应用产品。关于其中用到的两个dll文件,可到http://d.download.csdn.net/down/2352061/taomanman免费下载。 ...
  • taomanman
  • taomanman
  • 2010年05月14日 14:39
  • 5577

javascript 关键字高亮显示实现代码

关键字高亮显示 脚本之家是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascrip...
  • apollokk
  • apollokk
  • 2015年02月03日 10:56
  • 1206

js-检索文字高亮显示

$(function(){ $("#codearea").bind("click",function(){getSelect($("#codearea"))}); $("#codearea").c...
  • qq_16590151
  • qq_16590151
  • 2015年02月27日 14:38
  • 929

关键字检索高亮标出-javasript/jQuery代码实现

此方法传入2个参数,一个是被检索内容所在的表单或者HTML元素的ID,另一为关键字,多个关键字的话,以空格隔开,下边直接上代码分享给大家: /*关键词检索高亮标出 *param idHtmlCont...
  • chenleixing
  • chenleixing
  • 2015年04月23日 08:44
  • 4789

如何在搜索页面中高亮显示关键字

 上个周的 高亮显示关键字问题困扰了我一段时间,还好在周五解决了,而且显示效果也还不错.通过调用BEAN的字符串替换功能,可以实现关键字的高亮显示.以下是JAVABEAN Replace.javapa...
  • peace_apple
  • peace_apple
  • 2006年09月04日 14:04
  • 4519

ios中 搜索关键字在结果中高亮显示

写的可能很菜 ,不过网上找了很久,都没找到相关代码,在解决自己的需求后,自己写了些,欢迎大神指导。 下面方法 并不是系统的搜索框 而是自己自定义搜素框 方法(1)//#pragma mark ...
  • syg90178aw
  • syg90178aw
  • 2014年12月11日 09:18
  • 915

android中搜索关键字高亮

import android.graphics.Color; import android.support.v7.app.ActionBarActivity; import android.os.Bu...
  • u012255016
  • u012255016
  • 2015年05月28日 11:41
  • 1427

jquery高亮显示搜索的关键字

这种需求可以用js实现,可以用jquery实现,殊不知jquery有现成的插件,亲,你不用自己实现了,只需要引入jquery-hightlight.js regex.html ...
  • qq_25226029
  • qq_25226029
  • 2015年04月15日 10:44
  • 1099

js代码实现查找关键字高亮显示

代码实现查找关键字高亮显示      #box{            height:200px;            width:500px;            margin:...
  • acess520
  • acess520
  • 2016年04月15日 00:26
  • 3758
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript正则方法replace实现搜索关键字高亮
举报原因:
原因补充:

(最多只允许输入30个字)