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 相关文章推荐
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 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执行定时任务的实现思路
2015/12/21 PHP
php 中的closure用法详解
2017/06/12 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python实现计算倒数的方法
2015/07/11 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Python函数调用追踪实现代码
2020/11/27 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
司机的工作范围及职责
2013/11/13 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
党校党性分析材料
2014/12/19 职场文书
2015年统战工作总结
2015/05/19 职场文书
小学家长意见怎么写
2015/06/03 职场文书
观后感开头
2015/06/19 职场文书
卖车协议书范文
2016/03/23 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python