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

金沙网址大全,金沙网址js3311,金沙网址注册,金沙网上娱乐澳门 www.sljzmb.com 转载  发布时间:2017年09月18日 08:40:32   作者:当作看不见   我要评论

这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.先介绍一下正则表达式的replace方法,具体内容详情大家参考下本文

前言

正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它.

这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.

先介绍一下正则表达式的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>

总结

以上所述是小编给大家介绍的JavaScript正则方法replace实现搜索关键字高亮显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 半小时精通正则表达式 经典实例介绍

    半小时精通正则表达式 经典实例介绍

    想必很多人都对正则表达式都头疼.今天,我以我的认识,加上网上一些文章,希望用常人都可以理解的表达方式.来和大家分享学习经验
    2012-09-09
  • PHP中过滤常用标签的正则表达式

    PHP中过滤常用标签的正则表达式

    在 php 项目中,经常要用到一些过滤标签的正则表达式,收藏一下备用
    2014-05-05
  • 正则替换实现输入框只能有数字、中英文逗号

    正则替换实现输入框只能有数字、中英文逗号

    最近在开发过程中,需要一个输入框里面只能有数字与中英文逗号,因为是相关文章,其它的也不让出现,容易造成问题,编程容易把介绍复制到里面,所以想到了这个方法
    2016-05-05
  • 详解正则表达式表单验证实例

    详解正则表达式表单验证实例

    这篇文章主要为大家详细介绍了正则表达式表单验证实例,如何进行表单验证,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js正则解析URL参数示例代码

    js正则解析URL参数示例代码

    URL参数使用js正则解析具体实现代码如下,有需求的朋友可以参考下,希望对大家有所帮组
    2013-08-08
  • php正则表达式中贪婪与非贪婪介绍

    php正则表达式中贪婪与非贪婪介绍

    什么叫贪婪,比如说要从字符串中td面包一td td面包二td吃面包,本来你只可以吃面包一,可是你贪心,于是就把第一个td到最后一个td里面的两个面包取出来了,你想多吃点,非贪婪也就是你不贪吃了,就只吃面包一
    2016-03-03
  • 密码强度的正则表达式两种方案JS总结篇

    密码强度的正则表达式两种方案JS总结篇

    本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。对密码强度正则表达式的两种方案感兴趣的朋友跟随脚本之家一起看看吧
    2018-03-03
  • Python正则表达式之基础篇

    Python正则表达式之基础篇

    正则表达式是用于处理字符串的强大工具,它并不是Python的一部分。这篇文章主要介绍了Python正则表达式之基础篇的相关资料,需要的朋友可以参考下
    2016-01-01
  • 正则表达式i修饰符(大小写不敏感)

    正则表达式i修饰符(大小写不敏感)

    这篇文章主要介绍了正则表达式中i修饰符用来规定正则表达式的匹配是大小写不敏感的,需要的朋友可以参考下
    2016-12-12
  • linux下如何配置SQLSERVER ODBC

    linux下如何配置SQLSERVER ODBC

    这篇文章主要介绍了linux下如何配置SQLSERVER ODBC的相关资料,需要的朋友可以参考下
    2015-09-09

最新评论