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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
vue 组件基础知识总结
Jan 26 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
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python内存管理机制原理详解
2019/08/12 Python
python实现快递价格查询系统
2020/03/03 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
团队精神演讲稿
2013/12/31 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
租房合同协议书
2014/04/09 职场文书
实习协议书范本
2014/09/25 职场文书
2014年党总支工作总结
2014/12/18 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书