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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
实例讲解React 组件
Jul 07 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
企业管理毕业生求职信
2014/03/11 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
捐书活动总结
2014/05/04 职场文书
委托书的格式
2014/08/01 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
给校长的建议书作文400字
2015/09/14 职场文书