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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue项目引入ts步骤(小结)
2019/10/31 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python排序算法实例代码
2017/08/10 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python实现二维插值的三维显示
2018/12/17 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
委托书模板
2014/04/04 职场文书
劳资协议书范本
2014/04/23 职场文书
申报优秀教师材料
2014/12/16 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
食品药品安全责任书
2015/05/11 职场文书
教师节联欢会主持词
2015/07/04 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书