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


Posted in Javascript onApril 20, 2015

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

我们来回顾一下replace方法的使用:
先定义一个正则对象:var re=/中间写匹配的条件/;
replace():正则匹配字符串,若是匹配成功,将匹配成功的字符串用新的字符串来替换
语法:字符串.replace(re,新的字符串);

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

<!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可以是回调函数,我们对程序进行改造一下,将第二个参数换成回调函数,并且给这个回调函数传递一个参数

<!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>

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

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

<!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方法了解加深了一步。。。。。

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

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Three.JS实现三维场景
Dec 30 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
javascript正则表达式基础知识入门
Apr 20 #Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 #Javascript
js获取当前日期时间及其它操作汇总
Apr 17 #Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 #Javascript
You might like
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php集成动态口令认证
2016/07/21 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
实例讲解python函数式编程
2014/06/09 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python三大神器之fabric使用教程
2019/06/10 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
高校十八大报告感想
2014/01/27 职场文书
三好生演讲稿
2014/09/12 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
仓库管理制度范本
2015/08/04 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书