js-replace的高阶用法,你知道吗

string.replace函数是我们处理字符串需要经常用到的，replace的精妙就在于它的方便和灵活，可以配合正则表达式共同使用，以及还可以对匹配到的组进行分别处理

我们都知道string.replace(arg1,arg2)的基本用法，比如:

• 可以匹配简单的字符串

var str = 'hello world';
str = str.replace('world','xiaoyue');
console.log(str);

output:
    hello xiaoyue

• 还可以匹配正则表达式

// 匹配美国电话号码
var str = 'please call 1 (555)555-5555';
str = str.replace(/(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}/g,'12530');
console.log(str);

output:
    please call 12530

下面就让我们学习一下,string.replace的高阶用法

• 特殊标记 $

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

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

   var str = 'Please make health your first priority'; //健康放在第一位
   str = str.replace(/(^\w+)(.+)/g,'$2 $1');
   console.log(str);
   // output:  make health your first priority Please
   var str = '"a","bc"';
   // 匹配所有 类似"abc" 字符并替换为 'abc'
   str = str.replace(/"([^"]*)"/g,"'$1'");
   console.log(str);
   // output: 'a','bc'
  

  • $` (tab键上方的字符): 表示匹配字符串文本左边的文本

  str = 'hello world';
  str = str.replace(/world/g,'$`');
  console.log(str);
  //output: hello hello
  

  • $' : 表示匹配字符串文本右边的文本

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

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

    // $&
    str = 'hello world';
    str = str.replace(/hello world/g,"$& ,fun");
    console.log(str);
    // output: hello world ,fun
    
    //    $'(‘:单引号)：表示匹配字符串的右边文本。
    var myString = "javascript";
    myString = myString.replace(/java/,"$&$' is ") 
    console.log(myString)
    // output: javascript is script
    

    • && : 表示$转移

• 第二个参数传入函数

str = 'abcdbc';
str = str.replace(/(b)(c)/g,function(){
    console.log(arguments);
    return '&&';
});
console.log(str);
// output: 
// ["bc", "b", "c", 1, "abcd"]
//  0:bc"
//  1:"b"
//  2:"c"
//  3:1
//  4:"abcd"
//  ...
// ["bc", "b", "c", 1, "abcd"]
//  0:bc"
//  1:"b"
//  2:"c"
//  3:4
//  4:"abcd"
//  ...
//  a&&d&&

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

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

note: 如果匹配到的全字符串有多个，每个都会执行一次函数

一个简单的使用:
在不用函数之前，你可能会这样:

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);
// output: 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);
// output: Please Make Heath Your First Proprity