详解javascript replace高级用法


Posted in Javascript onFebruary 17, 2019

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定,当然也可以使用artTemplate模板来绑定数据,那么artTemplate模板它绑定数据的原理是什么呢?其实它就是利用了replace()方法。
对于正则replace约定了一个特殊标记符”$”:

1)、$i(i取值范围1~99):表示从左到右正则子表达式所匹配的文本
2)、$&:表示与正则表达式匹配的全部文本
3)、$`(`:1旁边的那个键):表示匹配字符串的左边文本
4)、$'(':单引号):表示匹配字符串的右边文本
5)、$$:表示$转移

1、replace基本用法

<script type="text/javascript">
  /*要求将字符串中所有的a全部用A代替*/

  var str = "javascript is great script language!";
  //只会将第一个匹配到的a替换成A
  console.log(str.replace("a","A"));
  //只会将第一个匹配到的a替换成A。因为没有在全局范围内查找
  console.log(str.replace(/a/,"A"));
  //所有a都被替换成了A
  console.log(str.replace(/a/g,"A"));
</script>

1.1、replace基本用法之替换移除指定class类

<script type="text/javascript">
  /*要求将下面这个元素中的unabled类移除掉*/

  <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div>
  var classname = document.getElementById(“j_confirm_btn”).className;
  /*(^|\\s)表示匹配字符串开头或字符串前面的空格,(\\s|$)表示匹配字符串结尾或字符串后面的空格*/
  var newClassName = classname.replace(/(^|\\s)unabled(\\s|$)/,””);
  document.getElementById(“j_confirm_btn”).className = newClassName;
</script>

2、replace高级用法之 ---- $i

2.1、简单的$i用法

<script>
  /*要求:将字符串中的双引号用"-"代替*/

  var str = '"a", "b"';
  console.log(str.replace(/"[^"]*"/g,"-$1-"));
  //输出结果为:-$1-, -$1-
  /*解释:$1就是前面正则(/"[^"]*"/g)所匹配到的每一个字符。*/
</script>

2.2、$i与分组结合使用

<script>
  /*要求:将下面字符串替换成:javascript is fn.it is a good script language*/
  
  var str = "javascript is a good script language";
  console.log(str.replace(/(javascript)\s*(is)/g,"$1 $2 fn.it $2"));
  /*解释:每一对括号都代表一个分组,从左往右分别代表第一个分组,第二个分组...;如上"*(javascript)"为第一个分组,
"(is)"为第二个分组。$1就代表第一个分组匹配的内容,$2就代表第二个分组匹配的内容,依此类推...*/
</script>

2.3、$i与分组结合使用----关键字高亮显示

当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了,那么这种效果用JavaScript能否显示呢?答案是可以的,使用replace()很轻松就搞定了。

<script>
  /*要求:将下列字符串中的"java"用红色字体显示*/
  
  var str = "Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme。";

  document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>'));

  /*解释:必须要开启全局搜索和忽略大小写,否则匹配不到所有的”java”字符*/
</script>

2.4、反向分组----分组的反向引用

在正则中,当我们需要匹配两个或多个连续的相同的字符的时候,就需要用到反向引用了,查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式,这里再介绍另一种反向分组。

<script type="text/javascript">
  /* /ab(cd)\1e/ 这里的 \1 表示把第1个分组的内容重复一遍*/

  console.log(/ab(cd)\1e/.test("abcde"));//false
  console.log(/ab(cd)\1e/.test("abcdcde"));//true

  /*要求:将下列字符串中相领重复的部分删除掉"*/
  var str = "abbcccdeee";
  var newStr = str.replace(/(\w)\1+/g,"$1");
  console.log(newStr); // abcde
</script>

3、replace高级用法之参数二为函数

replace函数的第二个参数不仅可以是一个字符,还可以是一个函数!

3.1、参数二为函数之参数详解

<script>
  var str = "bbabc";
  var newStr = str.replace(/(a)(b)/g,function (){
  console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
   /*参数依次为:
    1、整个正则表达式所匹配到的字符串----"ab"
    2、第一个分组匹配到的字符串,第二个分组所匹配到的字符串....依次类推一直      到最后一个分组----"a,b"
    3、此次匹配在源字符串中的下标,返回的是第一个匹配到的字符的下标----2
    4、源字符串----"bbabc"
   */
  })
</script>

3.2、参数二为函数之首字母大写案例

<script>
  /*要求:将下列字符串中的所有首字母大写*/
  
  var str = "Tomorrow may not be better, but better tomorrow will surely come!";
  var newStr = str.replace(/\b\w+\b/gi,function (matchStr){
    console.log(matchStr);//匹配到的字符
    return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1);
  });
  console.log(newStr);
</script>

3.3、参数二为函数之绑定数据----artTemplate模板核心

<h1>周星驰喜剧电影:</h1>
<div id="content"></div>
<script type="text/javascript">
  var data = {
    name: "功夫",
    protagonist: "周星驰"
  },
  domStr = '<div><span>名称:</span><span>{{name}}</span></div><div><span>导演:</span><span>{{protagonist}}</span> </div>';

  document.getElementById("content").innerHTML = formatString(domStr,data);
  /*绑定数据的核心就是使用正则进行匹配*/
  function formatString(str,data){
    return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){
      return data[group1];
    });
  }
</script>

4、replace高级用法之获取与正则表达式匹配的文本

4.1、replace高级用法之获取与正则表达式进行匹配的源字符串

<script>
  var str = "i am a good man";
  var newStr = str.replace(/good/g,"$&");
  console.log(newStr);//结果:输出i am a good man
  /*解释:在这里”$&”就是与正则表达式进行匹配的那个源字符串*/
</script>

4.2、replace高级用法之获取正则表达式匹配到的字符

<script>
  /*要求:将"i am a good man"替换成"i am a good-gond man" */
  
  var str = "i am a good man";
  var newStr = str.replace(/good/g,"$&-$&");
  console.log(newStr);
  /*解释:在这里”$&”可以获取到前面正则表达式匹配的内容,如上面的”$&”就是正则表达式匹配到的”good”*/
</script>

5、replace高级用法之获取正则匹配的左边的字符

<script>
  /*要求:将下列字符串替换成"java-java is a good script"*/

  var str = "javascript is a good script";
  var newStr = str.replace(/script/,"-$`");
  console.log(newStr)
  /*解释:"$`"获取的是正则左边的内容,如上正则中"script"字符前面的是"java","-$`"就是"-java","-$`"会把script替换掉。*/
</script>

6、replace高级用法之获取正则匹配的右边的字

<script>
   /*要求:将下列字符替换成"java is a good language!it is a good script is a good script"*/
   
  var str = "javascript is a good script";
  var newStr = str.replace(/script/," is a good language!it$'");
  console.log(newStr)
  /*解释:"$'"获取的就是str右边的内容,如上正则中"$'"就是" is a good script"。
  " is a good language!it$'"会把正则匹配到的"script"替换掉*/
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Nuxt.js 数据双向绑定的实现
Feb 17 #Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 #Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
javascript实现倒计时关闭广告
2021/02/09 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python中Qslider控件实操详解
2021/02/20 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
大学学习个人的自我评价
2014/02/18 职场文书
2014组织生活会方案
2014/05/19 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2016国庆促销广告语
2016/01/28 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL视图概念以及相关应用
2022/04/19 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers