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之对系统的toFixed()方法的修正
May 08 Javascript
javascript解析json数据的3种方式
May 08 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
Jquery Datatables的使用详解
Jan 30 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分页类
2013/10/26 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php实现学生管理系统
2020/03/21 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python访问hdfs的操作
2020/06/06 Python
python如何提升爬虫效率
2020/09/27 Python
python中的unittest框架实例详解
2021/02/05 Python
测绘工程本科生求职信
2013/10/10 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
深入理解pytorch库的dockerfile
2022/06/10 Python