详解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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
Javascript实现单选框效果
Dec 09 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
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表单转换textarea换行符的方法
2010/09/10 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
非常好的js代码
2006/06/27 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
医院护士的求职信范文
2013/12/26 职场文书
捐款倡议书范文
2014/02/02 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
欢迎领导检查标语
2014/06/27 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS