javascript正则表达式中的replace方法详解

   replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。

  前面的文章我已经介绍了正则的四个基本方法,当时也提到过replace方法

  我们来回顾一下replace方法的使用:

  先定义一个正则对象:var re=/中间写匹配的条件/;

  replace():正则匹配字符串,若是匹配成功,将匹配成功的字符串用新的字符串来替换

  语法:字符串.replace(re,新的字符串);

  举个例子:网络中经常会遇到,不文明的词会被*代替,我们来试一下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹,不行,你大爷,我要萌萌你妹,不行,你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,'*');
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>

  当然了,我们对上面的转化效果不满意,我想要实现的是,转化了几个字就显示几个*号

  这时候我们就需要进行分析了,其实,replace(参数1,参数2)中的参数2可以是回调函数,我们对程序进行改造一下,将第二个参数换成回调函数,并且给这个回调函数传递一个参数

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹,不行,你大爷,我要萌萌你妹,不行,你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
alert(obj);
/*alert(obj.length);*/
});
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>

  可以看出上面的结果很奇怪,第二个参数是回调函数,但是显示回调函数中的参数时,却都是成功匹配到的字符串

  那么我们就可以针对这个参数中的每个结果做处理,几个字就产生几个*号

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹,不行,你大爷,我要萌萌你妹,不行,你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
var a='';
for (var i = 0; i < obj.length; i++) {
a+='*';
}
return a;
});
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>

  通过上面的例子,是不是又对replace方法了解加深了一步。。。。。

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-10-07 09:54:37

javascript正则表达式中的replace方法详解的相关文章

javascript正则表达式中的replace方法详解_javascript技巧

前面的文章我已经介绍了正则的四个基本方法,当时也提到过replace方法 我们来回顾一下replace方法的使用: 先定义一个正则对象:var re=/中间写匹配的条件/; replace():正则匹配字符串,若是匹配成功,将匹配成功的字符串用新的字符串来替换 语法:字符串.replace(re,新的字符串): 举个例子:网络中经常会遇到,不文明的词会被*代替,我们来试一下: <!DOCTYPE> <html> <head> <meta charset='utf-

Ruby中的钩子方法详解

  这篇文章主要介绍了Ruby中的钩子方法详解,本文讲解了什么是钩子方法.included.Devise中的 included.extended.ActiveRecord中的 extended.prepended.inherited等内容,需要的朋友可以参考下 Ruby的哲学理念是基于一个基本的要素,那就是让程序员快乐.Ruby非常注重程序员的快乐,并且也提供了许多不同的方法来实现它. 它的元编程能力能够让程序员编写在运行时动态生成的代码.它的线程功能使得程序员有一种优雅的的方式编写多线程代码.

Android 中 onSaveInstanceState()使用方法详解

Android 中 onSaveInstanceState()使用方法详解 覆盖onSaveInstanceState方法,并在onCreate中检测savedInstanceState和获取保存的值 @Override protected void onSaveInstanceState(Bundle outState) { outState.putInt("currentposition", videoView.getCurrentPosition()); super.onSave

javascript jquery-jquery中getScript()的用法详解,从一个远程js文件中读取数据

问题描述 jquery中getScript()的用法详解,从一个远程js文件中读取数据 第一个html文件: <html> <head> <script type="text/javascript" src="jquery-2.1.3.js"></script> $.getScript("shuj.js",function(){alert("aaaaa");}) </hea

js中string之正则表达式replace方法详解

replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法.只不过牵扯到正则的时候比较多一些.需要我们灵活的使用. 语法: stringObj.replace(regexp/substr,replacement): 第一个参数:必需.字符串中要替换的子串或正则RexExp: 第二个参数:必需,一个字符串值,规定了替换文本或生成替换文本的函数. 返回值:注意它的返回值是一个新的字符串,并没有更改原有字符串,是用 replacement 替换了

JavaScript获取服务器时间的方法详解_javascript技巧

本文实例讲述了JavaScript获取服务器时间的方法.分享给大家供大家参考,具体如下: Javascript是运行在客户端的脚本,我们一般都用new Date()来获取当前时间,但是得到的是客户端的时间,客户端时间是随意更改的,如果要做一个产品发布倒计时的话,客户端时间一改,就要闹笑话了.业务中需要用到服务器时间的场景还有很多,那么仅仅通过js怎么拿到服务器时间呢?事实上,只需要一个ajax请求就搞定,通过读取XMLHttpRequest对象的响应头里面的时间戳得到当前服务器时间! 原理就是这

JavaScript与HTML的结合方法详解_javascript技巧

HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内.一.<script> 标签       如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript在

JavaScript 正则表达式 重复 转义 字符类详解

正则表达式的重复字符:字符 含义 {n,m} 匹配前一项至少n次,但是不能超过m次 {n,} 匹配前一项n次,或更多次 {n} 匹配前一项恰好n次 ? 匹配前一项0次或1次,也就是说前一项是可选的.相当于{0,1} + 匹配前一项1次或多次,相当于{1,} * 匹配前一项0次或多次,相当于{0,} 示例:  代码如下 复制代码 //所有十位数,到四位数,包括:0000 var pattern = /d{2,4}/; //如下正则内容匹配ab,abc,abcccc var pattern = /a

ThinkPHP中where()使用方法详解_php实例

本文介绍ThinkPHP的where()方法的用法.where方法可以用于对数据库操作的结果进行筛选.即SQL查询语句中的where子句. 今天来给大家讲下查询最常用但也是最复杂的where方法,where方法也属于模型类的连贯操作方法之一,主要用于查询和操作条件的设置. where方法的用法是ThinkPHP查询语言的精髓,也是ThinkPHP ORM的重要组成部分和亮点所在,可以完成包括普通查询.表达式查询.快捷查询.区间查询.组合查询在内的查询操作.where方法的参数支持字符串和数组,虽