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 相关文章推荐
Javascript Memoizer浅析
Oct 16 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
linux iconv方法的使用
2011/10/01 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
如何用js控制css中的float的代码
2007/08/16 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
django文档学习之applications使用详解
2018/01/29 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
微信小程序python用户认证的实现
2019/07/29 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
应用艺术专业个人的自我评价
2014/01/03 职场文书
初三政治教学反思
2014/01/30 职场文书
统计岗位职责
2014/02/21 职场文书
数控专业自荐书范文
2014/03/16 职场文书
化工操作工岗位职责
2014/04/29 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014年评职称工作总结
2014/11/20 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2015年安全月活动总结
2015/03/26 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers