replace用法

String.prototype.replace其实也不能算是什么高级用法 就是一些不常见的用法，老生常谈的东西了

replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

String.prototype.replace(pattern, replacement)

TIP

1、该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串

2、在进行全局的搜索替换时，正则表达式需包含 g 标志。

基础用法

//基本用法：
const myString = "javascript is a good script language";
// 第一个a字母会被替换为大A
console.log(myString.replace("a","A"));

使用字符串作为参数

替换字符串可以插入下面的特殊变量名：

$$	插入一个 "$"。
$&	插入匹配的子串。
$`	插入当前匹配的子串左边的内容。
$'	插入当前匹配的子串右边的内容。
$n	假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始。如果不存在第 n个分组，那么将会把匹配到到内容替换为字面量。比如不存在第3个分组，就会用“$3”替换匹配到的内容。
$<Name>	这里*Name* 是一个分组名称。如果在正则表达式中并不存在分组（或者没有匹配），这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。

const str = 'it is a letter';
console.log(str.replace('a', '$$')); // it is $ letter
console.log(str.replace('a', '$& $&')); // it is a a letter
console.log(str.replace('a', '$`')); // it is it is  letter
/* 
输出 it it is is a letter
$1=it $2=is 所以会被it is 替换为it it is is 
*/
console.log(str.replace(/(it) (is)/, '$1 $1 $2 $2')); 

指定一个函数作为参数

这个的功能应该多些， 一般的模式我们选用正则多一些

参数将依次为： 1、整个正则表达式匹配的字符。 2、第一分组匹配的内容、第二分组匹配的内容…… 以此类推直到最后一个分组。 3、此次匹配在源自符串中的偏移下标（位置）。 4、源自符串

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

let myString = "bbabc";
myString.replace(/(a)(b)/g, function(){
    console.log(arguments); // ["ab", "a", "b", 2, "bbabc"]
});

一些案例

分组后颠倒

let myString = 'xdyuan  .  cn';
myString = myString.replace(/(\w+)\s*\.\s*(\w+)/, '$2 . $1');
console.log(myString); // cn . xdyuan

首字母大写

function capitalize(str){
    return str.replace( /(^|\s)([a-z])/g , function(m,p1,p2){
        return p1+p2.toUpperCase();
    } );
}
let myString = "i am a boy !";
console.log(capitalize(myString)); //I Am A Boy！

css属性转换

function styleHyphenFormat(propertyName) {
  const upperToHyphenLower = (match) => '-' + match.toLowerCase();
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}

console.log(styleHyphenFormat('borderTop')); // border-top

反过来操作

function styleCamelCaseFormat(propertyName) {
  const hyphenLowerToUpper = (match, p1) => p1.toUpperCase();
  return propertyName.replace(/-([a-z])/g, hyphenLowerToUpper);
}

console.log(styleCamelCaseFormat('border-top')); // borderTop

实现es6 模板字符串

const str = 'my name is ${ name }, age is ${age}';
const age = 20;
const name = 'xdyuan';

// const templates = str.match(reg);
function parseStr(templateStr = '') {
  const reg = /\$\{(.+?)\}/g;
  return templateStr.replace(reg, function () {
    return eval(arguments[1]);
  });
}

console.log(parseStr(str));	 // my name is xdyuan, age is 20

使用正则来避免循环

输出一个数组对象。'x' 产生一个 'on' 状态，'-'（连接符）产生一个 'off' 状态，而 '_' （下划线）表示 'on' 状态的长度。

var str = '-xxx-xx-x-';
var retArr = [];
str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
  if (p1) { retArr.push({ on: true, length: p1.length }); }
  if (p2) { retArr.push({ on: false, length: 1 }); }
});
/*
[
  { on: true, length: 3 },
  { on: false, length: 1 },
  { on: true, length: 1 },
  { on: false, length: 1 }
]
*/
console.log(retArr);

其他扩展

下面可能都是一些实用的方法， 但是总是忘记

String.prototype.match()

返回的是结果数组

• 如果使用g标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组。
• 如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。 在这种情况下，返回的项目将具有如下所述的其他属性。

const str = '11 + 22 = 33';
console.log(str.match(/\d+/)); // [ '11', index: 0, input: '11 + 22 = 33', groups: undefined ]
console.log(str.match(/\d+/g)); // [ '11', '22', '33' ]

String.prototype.search()

返回的是索引位置或者-1

search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。

str.search(regexp)

如果匹配成功，则 search() 返回正则表达式在字符串中首次匹配项的索引;否则，返回 -1。

var str = "hey JudE";
var re = /[A-Z]/g;
var re2 = /[.]/g;
console.log(str.search(re)); // returns 4, 第一个大写字母 'J' 的位置
console.log(str.search(re2)); // returns -1， 因为找不到匹配

RegExp.prototype.exec()

exec()方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null

在设置了 global (opens new window) 或 sticky (opens new window) 标志位的情况下（如 /foo/g or /foo/y），JavaScript RegExp (opens new window) 对象是有状态的。他们会将上次成功匹配后的位置记录在 lastIndex (opens new window) 属性中。使用此特性，exec() 可用来对单个字符串中的多次匹配结果进行逐条的遍历包括捕获到的匹配

const reg = /foo*/g;
const str1 = 'table fooootball, foosball';
let result = reg.exec(str1);
while (result) {
  console.log(result, reg.lastIndex);
  result = reg.exec(str1);
}
/* 
Expected Output: Fount foooo, Next starts at 11
Expected Output: Fount foo, Next starts at 21
*/

RegExp.prototype.test()

test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

返回一个是否匹配的布尔值

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result); // true