js replace方法第二个参数的两种用法

定义和用法：

replace()方法用于在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串。

stringObject.replace(regexp/substr,replacement)

regexp/substr： 必需。规定子字符串或者要替换的模式的RegExp对象。请注意，如果访值是字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为RegExp对象。

replacement： 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

1、普通的字符串

当replacement 为字符串时，如果是普通的字符串，那很简单，就是将匹配到的字符远的成该字符串。

var str = 'hello world';
str = str.replace(/world/, 'javascript');
console.log(str) // -> hello javascript;

2、特殊标记$

对于replace使用正则，约定了一个特殊标记$

字符	替换文本
1、1、1、2、... $99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与regexp相匹配的子串
$`	位于匹配子串左侧的文本
$'	位于匹配子串右侧的文本
$$	插入一个“$”

1）$i(i: 1 - 99)：表示从左到右，正则子表达式（组）匹配到的文本。

var name = 'Peppa Pig';
name = name.replace(/(\w+)\s* \s*(\w+)/, '$2 $1');
console.log(name); // -> Pig Peppa

var str = '"a", "bc"';
str = str.replace(/"([^"]*)"/g, "'$1'");
console.log(str); // -> 'a','bc'

1. $`（tab键上方的字符）：表示匹配字符串文本左边的文本

var str = 'hello world';
str = str.replace(/world/g, '$`');
console.log(str); // -> hello hello 

3)$'：表示匹配字符串右边的文本

var str = 'hello world';
str = str.replace(/hello/g, "$'");
console.log(str); // -> world world

4)$&: 表示与正则表达式匹配的全文本

var str = 'hello world';
str = str.replace(/hello world/g, "$& ,fun");
console.log(str); // -> hello world ,fun

// 与$'组合使用
var myString = "javascript";
myString = myString.replace(/java/, "$&$' is ");
console.log(myString); // -> javascript is script

<span class="title">
            <span v-html="highlight(item.title)"></span>
            -
            <span v-html="highlight(item.author)"></span>
<span>
------------------------------------------------------

// 替换关键字进行高亮的函数
        highlight(str){
     
          let reg = new RegExp(this.val,'g');
          // replace第二个参数中$&代表插入匹配的子串。
          return str.replace(reg, `<span class="highlight">$&</span>`)

let reg = /(?=(\d{3})+$)/g;
let string = "666666666";
console.log(string.replace(reg,'$&,'));

<!-- 页面打印结果如下 -->
666,666,666


1. 首先是(?=n)的理解，简单来讲就是一个修饰作用的，比如a(?=\d),解析为后面有一个数字的a，特别注意的是，如果写成(?=\d)表示后面有一个数字的空串，此处的空串就是我们需要替换的"，"；
2. 然后是(\d{3})+的理解，将匹配的3个数字当成一个整体，像3，6，9...,这样就可以匹配后面有3或者6或者9个数字的字符
3. \B就是不匹配边界，如果不添加\B结果如下：

5)$$: 表示插入一个$

var str = '￥20000.00';
str = str.replace(/￥/, "$$");
console.log(str); // -> $20000.00

3、第二个参数为函数

var str = 'abcdbc';
str = str.replace(/(b)(c)/g, function() {
    console.log(arguments);
    return '&&';
});
console.log(str);

// 输出如下：
/*
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 1
4: "abcdbc"
...
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 4
4: "abcdbc"
...
a&&d&&
*/
复制代码

正在上传…重新上传取消

函数返回值表示用来替换匹配到的元素的字符串,

函数参数表示：

- param 1: 匹配到的字符串
- param 2: 匹配的子字符串
- param 3: 匹配的子字符串
- param 4: 匹配到的字符串在字符串中的位置
- param 5: 原始字符串

note: 如果匹配到的全字符串有多个，每个都会执行一次函数（有多少（n）个子字符串， 第二个参数开始到第n个都是表示子串，第n+1为该子串所在全字符串中的索引位置，最后一个参数为整个字符串 ）

不使用函数和使用函数的区别： 
复制代码

正在上传…重新上传取消

// 不使用函数
str = '<div>"hello & world"</div>';
str = str.replace(/&/g,'&amp');
str = str.replace(/</g,'&lt');
str = str.replace(/>/g,'&gt');
str = str.replace(/"/g,'&quot');
str = str.replace(/'/g,'&#39');
console.log(str);
// output: &lt;div&gt;&quot;hello &amp; world&quot;&lt;/div&gt;
复制代码

正在上传…重新上传取消

复制代码

正在上传…重新上传取消

// 使用函数
str = '<div>"hello & world"</div>';
str = str.replace(/[<>"'&']/g,function(a){
    switch(a){
    case '<':
        return '&lt;';
    case '>':
        return '&gt;';
    case '"':
        return '&quot;';
    case ''':
        return '&#39;';
    case '&':
        return '&amp;';
    }
});
console.log(str);
// output: &lt;div&gt;&quot;hello &amp; world&quot;&lt;/div&gt;
复制代码

正在上传…重新上传取消

复制代码

单词首字母大写

var str = 'please make heath your first proprity';
str = str.replace(/\b\w+\b/g, function(word) {
    return word[0].toUpperCase() + word.slice(1);
});
console.log(str); // -> Please Make Heath Your First Proprity
复制代码

或者

var str = 'please make heath your first proprity';
str = str.replace(/(^|\s)([a-z])/g, function(word, p1, p2) {
    return p1 + p2.toUpperCase();
});
console.log(str); // -> Please Make Heath Your First Proprity