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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
详解javascript高级定时器
2015/12/31 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
幼儿园亲子活动总结
2014/04/26 职场文书
建筑施工安全责任书
2014/07/24 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript