当前位置:首页 > 编程教程 > javascript技术文章 > 详解javascript replace高级用法

总结javascript replace高级用法

  • 发布时间:
  • 作者:码农之家
  • 点击:198

这篇文章主要知识点是关于javascript、replace、JavaScript中的replace()方法使用详解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript之美
  • 类型:JavaScript大小:94 MB格式:PDF作者:安顿?科瓦诺夫
立即下载

详解javascript replace高级用法

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到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 >$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中的replace()方法使用详解

 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串。

替换字符串可以包含以下特殊替换模式:

JavaScript中的replace()方法使用详解

 语法

string.replace(regexp/substr, newSubStr/function[, flags]);

下面是参数的详细信息:

  •     regexp : 一个RegExp对象。匹配被替换参数的返回#2.
  •     substr : 一个字符串,由newSubStr 来替换
  •     newSubStr : 它取代从参数中收到的子字符串 #1.
  •     function : 一个函数被调用以创建新的子串
  •     flags : 包含的正则表达式标志的任意组合字符串: g - 全局匹配, i - 忽略大小写,m - 匹配多行。此参数仅用于如果所述第一参数是一个字符串。

返回值:

  •     它只是返回一个新的改变的字符串

例子:

下面的示例演示了如何使用全球和忽略大小写标志,允许替换,以使用字符串'oranges'取代'apples'

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script type="text/javascript">

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");

document.write(newstr ); 

</script>
</body>
</html>

 
例子:

下面的例子演示了如何在一个字符串转换的词:

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script type="text/javascript">

var re = /(\w+)\s(\w+)/;
var str = "zara ali";
var newstr = str.replace(re, "$2, $1");
document.write(newstr);

</script>
</body>
</html>

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript replace高级用法 相关电子书
学习笔记
网友NO.836829

JavaScript基于replace+正则实现ES6的字符串模版功能

本文实例讲述了JavaScript基于replace+正则实现ES6的字符串模版功能。分享给大家供大家参考,具体如下: 采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯。每写一个变量就要断一下,插入一个 + 和 “。十分容易出错。 无法重用。HTML 片段都是离散化的数据,难以对其中重复的部分进行提取。 无法很好地利用 标签。这是 HTML5 中新增的一个标签,标准极力推荐将 HTML 模板放入 标签中,使代码更简洁。 replace+正则实现 项目刚开始用的数据拼接 function formatString() { if (arguments.length === 0) return null; var str = arguments[0]; for (var i = 1; i arguments.length; i++) { var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm'); str = str.replace(re, arguments[i]); } return str;}, 第一个参数为需要渲染的……

网友NO.245914

javascript中replace使用方法总结

ECMAScript提供了replace()方法。这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。 1. 两个参数都为字符串的情况 var text = 'cat, bat, sat, fat'; // 在字符串中找到at,并将at替换为ond,只替换一次 var result = text.replace('at', 'ond');// "cond, bat, sat, fat" console.log(result); 2. 第一个参数为RegExp对象,第二个参数为字符串 我们可以发现上面这种情况只替换了第一个at,如果想要替换全部at,就必须使用RegExp对象。 var text = 'cat, bat, sat, fat'; // 使用/at/g 在全局中匹配at,并用ond进行替换 var result = text.replace(/at/g, 'ond'); // cond, bond, sond, fond console.log(result); 3. 考虑RegExp对象中捕获组的情况 RegExp具有9个用于存储捕获组的属性。$1, $2...$9,分别用于存储第一到九个匹配的捕获组……

网友NO.489212

javascript中的replace函数(带注释demo)

javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用。最近和前端走的比较近,借此机会,好好巩固一下相关知识点。 1.初识replace 在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url 一个 string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身 location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录) 与之相对的是location.href="url" rel="external nofollow" 有痕跳转(将当前链接导航到一个新的url 且保存历史记录) 这个没有比较清晰 string.replace函数 很多初学者,会认为这个跟C#中的Replace一样,但并不相同,js中replace更灵活。 最基本的用法 就是简单替换字符串。来看一个例子: var str = "abcd-……

网友NO.286118

基于JavaScript中字符串的match与replace方法(详解)

1、match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 match()方法的返回值为:存放匹配结果的数组。 2、replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 replace方法的返回值为:一个新的字符串。 3、说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换。 示例代码: !DOCTYPE htmlhtml lang="zh" head meta charset="UTF-8" / titleJavaScript中字符串的match与replace方法/title /head body !--注意src路径要对-- script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"/script script type="text/javascript" var str = "1 plus 2 equal 3"; //match方法返回值为数组 var arr = str.match(/[0-9]/g) console.log(arr); var new_str = str.replace(/[0-9]/g, 'newstr'); //replace方法返回值为新的字……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757