JavaScript的replace方法与正则表达式结合应用讲解(2)
作者:hezhiwu5 发布时间:2008-03-06 21:37:00
大家在一些网站上搜索文章的时候,会发现这么一个现象,就是搜索的关键字会高亮改变颜色显示出来??这是怎么实现的呢??其实我们可以用正则表达式来实现,具体怎么样实现呢?简单的原理请看下面的代码
<script language="javascript">
var str="中华人民共和国,中华人民共和国";
var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");
document.write(newstr);
</script>
上面的程序缺少互动性,我们再改进一下程序,实现可以自主输入要查找的字符
<script language="javascript">
var s=prompt("请输入在查找的字符","人");
var reg=new RegExp("("+s+")","g");
var str="中华人民共和国,中华人民共和国";
var newstr=str.replace(reg,"<font color=red>$1</font>");
document.write(newstr);
</script>
可能大家都会对$1这个特殊字符表示什么意思不是很理解,其实$1表示的就是左边表达式中括号内的字符,即第一个子匹配,同理可得$2表示第二个子匹配。。什么是子匹配呢??通俗点讲,就是左边每一个括号是第一个字匹配,第二个括号是第二个子匹配。
当我们要把查找到的字符进行运算的时候,怎么样实现呢??在实现之前,我们先讲一下怎么样获取某一个函数的参数。。在函数Function的内部,有一个arguments集合,这个集合存储了当前函数的所有参数,通过arguments可以获取到函数的所有参数,为了大家理解,请看下面的代码
<script language="javascript">
function test()
{
alert("参数个数:"+arguments.length);
alert("每一个参数的值:"+arguments[0]);
alert("第二个参数的值"+arguments[1]);
//可以用for循环读取所有的参数
}
test("aa","bb","cc");
</script>
看懂上面的程序之后,我们再来看下面一个有趣的程序
<script language="javascript">
var reg=new RegExp("\\d","g");
var str="abd1afa4sdf";
str.replace(reg,function(){alert(arguments.length);});
</script>
我们惊奇的发现,匿名函数竟然被执行了二次,并且在函数里还带有三个参数,为什么会执行二次呢??这个很容易想到,因为我们写的正则表达式是匹配单个数字的,而被检测的字符串刚好也有二个数字,故匿名函数被执行了二次。。在匿名函数内部的那三个参数到底是什么内容呢??为了弄清这个问题,我们看下面的代码。
<script language="javascript">
function test()
{
for(var i=0;i<arguments.length;i++)
{
alert("第"+(i+1)+"个参数的值:"+arguments[i]);
}
}
var reg=new RegExp("\\d","g");
var str="abd1afa4sdf";
str.replace(reg,test);
</script>
经过观察我们发现,第一个参数表示匹配到的字符,第二个参数表示匹配时的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。其实这些参数的个数,还会随着子匹配的变多而变多的。弄清这些问题之后,我们可以用另外的一种写法
<script language="javascript">
function test($1)
{
return "<font color='red'>"+$1+"</font>"
}
var s=prompt("请输入在查找的字符","人");
var reg=new RegExp("("+s+")","g");
var str="中华人民共和国,中华人民共和国";
var newstr=str.replace(reg,test);
document.write(newstr);
</script>
看了上面的程序,原来可以对匹配到的字符为所欲为。下面简单举一个应用的例子
<script language="javascript">
var str="他今年22岁,她今年20岁,他的爸爸今年45岁,她的爸爸今年44岁,一共有4人"
function test($1)
{
var gyear=(new Date()).getYear()-parseInt($1)+1;
return $1+"("+gyear+"年出生)";
}
var reg=new RegExp("(\\d+)岁","g");
var newstr=str.replace(reg,test);
alert(str);
alert(newstr);
</script>
猜你喜欢
- 前言笔者用的是mac开发,但是mac自带的php功能安装十分不方便,并且和线上的linux开发环境不一致。在没有用docker之前一直用va
- 注意:列转行的方法可能是我独创的了,呵呵,因为在网上找不到哦,全部是我自己写的,用到了系统的SysColumns(一)行转列的方法先说说行转
- 简单的说延迟复制就是设置一个固定的延迟时间,比如1个小时,让从库落后主库一个小时。MySQL延时复制库作用存在即合理,延迟复制可以用来解决以
- 经常有一些图像任务需要从一张大图中截取固定大小的patch来进行训练。这里面常常存在下面几个问题:patch的位置尽可能随机,不然数据丰富性
- 如何存放或更新缓存?缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的。我们期望这个过程更自然一点,通过某种变化自动
- 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵
- 在SQL Server数据库操作中,我们常常会用到存储过程对实现对查询的数据的分页处理,以方便浏览者的浏览。本文我们总结了五种SQL Ser
- 如下所示:public function a(){ return $this->belongsTo('App\Mo
- scanner.php <?php /**************PHP Web木马扫描器**********************
- 前言在laravel项目开发中,经常使用到公共函数,那如何在laravel配置全局公共函数呢??下面话不多说了,来一起看看详细的介绍吧方法如
- 目录什么是 PyMySQL?PyMySQL 安装数据库连接实例:创建数据库表数据库插入操作数据库查询操作数据库更新操作删除操作执行事务错误处
- 在一些不多的数据下载和生成的时候,我们倾向于直接保存为文件,当我们修改某些参数后再一次运行时,之前运行时生成的文件就被覆盖了。为了解决这个问
- 为什么会用到 replace取名是一个很有讲究的事情,但每个人都不一样。一开始,我写了一个 A 项目,代码仓名称为 project-alph
- python多线程适合IO密集型场景,而在CPU密集型场景,并不能充分利用多核CPU,而协程本质基于线程,同样不能充分发挥多核的优势。针对计
- 前言要想让手机app自动登录,也就是让app自己操作。所以在脚本中我们需要对app控件进行操作,那么我们需要获取控件的信息。可以使用..\a
- 安装lodashnpm i --save-dev @types/lodash在组件中引入lodashimport * as _ from &
- 本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下1.实现拖拉图片时,带框的效果。即当鼠标拖动某一个图片或物体时,其原有位置扔
- 有时候在读取数据库之后,针对同一结果集,在同一个页面上输出的时候可能会碰到多次输出,也就是多次执行mysql_fetch_array(),在
- 登录页面能访问得到,但当执行下级目录的文件就不行了,浏览器直接跳出以下错误页面: 除些以外没有任何其它有价值的信息,因为此网站在我的电脑上执
- 1. 路由概念路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路