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压缩工具下载集合
Mar 06 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
PHP中的integer类型使用分析
2010/07/27 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
js读取本地文件的实例
2017/12/22 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python解析多帧dicom数据详解
2020/01/13 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
关于VPN
2012/06/10 面试题
护士辞职信范文
2014/01/19 职场文书
销售业务员岗位职责
2014/01/29 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
初中军训感想
2015/08/07 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
导游词之桂林山水
2019/09/20 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js