字符串replace的理解和练习和配合正则表达式的使用

Posted 2020-11-16 taohuaya

下面代码展示了（demo地址 https://codepen.io/peach_/pen/jONJjRY）：

1.字符串replace的理解和练习和配合正则表达式的使用,

2.正则表达式学习

3.通过正则表达式实现千分位

// 字符串replace的理解和练习
//示例来源：https://developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Global_Objects/String/replace
var re = /(w+)s(w+)/;
var str = "John Smith";
/*
$1 $2 代表 分别 正则表达式 子表达式(w+) 和 (w+) 的值, 其中 s 不是子表达式 而是 元字符
  /(w+)s+(w+)/
    $1    $2
    
*/
var newstr1 = str.replace(re, "$2, $1");
var newstr2 = str.replace(re, "$2$1");



console.log(newstr1); // Smith, John
console.log(newstr2); // SmithJohn

console.log(str.replace(re, "$1 666")); //John 666

console.log(str.replace(re, "$& aaa")); //John Smith aaa

name = ‘"a", "b"‘;

console.log( name.replace(/"/g, ‘1‘) ); //  1a1, 1b1
               //正则意思 匹配 "开头其后不为"的多个然后在匹配一个"
console.log( name.replace(/"([^"]*)"/g, "‘$1‘") ); //  ‘a‘, ‘b‘


// 在本例中，我们将把字符串中所有单词的首字母都转换为大写：
//示例来源：https://www.w3school.com.cn/jsref/jsref_replace.asp
var name2 = ‘aaa bbb ccc‘;
/*
/w+/g
正则表达式解析    
 匹配一个单词边界，也就是指单词和空格间的位置。例如， ‘er‘ 可以匹配"never" 中的 ‘er‘，但不能匹配 "verb" 中的 ‘er‘。
w 匹配字母、数字、下划线。等价于‘[A-Za-z0-9_]‘。

*/

var uw = name2.replace(/w+/g, function(word){
  console.log(word, ‘这里‘);  //分别输出 aaa bbb ccc
  return word.substring(0,1).toUpperCase()+word.substring(1);
});


console.log(uw, ‘首字母都转换为大写‘); //Aaa Bbb Ccc

/*
//示例来源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
将华氏温度转换为对等的摄氏温度节
下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"来表示，这个函数将返回一个数字加"C"来表示的摄氏温度。例如，如果输入是 212F，这个函数将返回 100C。如果输入的数字是 0F，这个方法将返回 "-17.77777777777778C"。

正则表达式test检查任何数字是否以 F 结尾。华氏温度通过第二个参数p1进入函数。这个函数基于华氏温度作为字符串传递给f2c函数设置成摄氏温度。然后f2c()返回摄氏温度。这个函数与Perl的 s///e 标志相似

*/

//replace 的第二个阐述为函数时  的参数说明
/*

指定一个函数作为参数节
你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。

下面是该函数的参数：

变量名    代表的值
match    匹配的子串。（对应于上述的$&。）
p1,p2, ...    
假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 /(a+)(+)/ 这个来匹配，p1 就是匹配的 a+，p2 就是匹配的 +。

offset    
匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 ‘abcd‘，匹配到的子字符串是 ‘bc‘，那么这个参数将会是 1）

string    被匹配的原字符串。
NamedCaptureGroup    命名捕获组匹配的对象

*/



function f2c(x){
  /*
  前提 replace 的第一个参数是 一个 正则表达式
  replace 的第二个参数 如果是 一个匿名函数
    第一个参数为 匹配到的 字符串
    从第二个参数为 依次 是正则的 子表达式 匹配的 字符
    ....      
   倒数第二个参数为  匹配到的子字符串在原字符串中的偏移量
   倒数第一个产生为 被匹配的原字符串。
  */
  function convert(str, p1, offset, s){
    console.log(‘这里是‘, str, p1, offset, s); // 212F 212 0 212F 这里是
    return ((p1-32) * 5/9) + "C";
  }
  var s = String(x);  //转换成字符串，与toString()的区别详见 https://www.cnblogs.com/leeke98/p/9754859.html
  // (?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， ‘industr(?:y|ies) 就是一个比 ‘industry|industries‘ 更简略的表达式。
       //匹配 单词边界 符号.或者 零个或多个 数字 前面的 的标段是匹配零次或多次 后面紧跟着F 单词边界
  var test = /(d+(?:.d*)?)F/g;  

  return s.replace(test, convert);
}


f2c(‘212F‘)
//---------------
//分析上面 函数
function f2C(x){
  /*
  前提 replace 的第一个参数是 一个 正则表达式
  replace 的第二个参数 如果是 一个匿名函数
    第一个参数为 匹配到的 字符串
    第二个参数为 是正则的 子表达式 匹配的 字符
  */
  function convert(str, p1, p2, offset, s){
    console.log(‘分析这里是‘, str, p1, p2, offset, s); // 212Fhhh 212 hhh 0 212Fhhh
    return ((p1-32) * 5/9) + "C";
  }
  var s = String(x);  //转换成字符串，与toString()的区别详见 https://www.cnblogs.com/leeke98/p/9754859.html
  // var test = /(d+(?:.d*)?)F/g;  
  var test = /(d+(?:.d*)?)F(w+)/g;

  return s.replace(test, convert);
}


f2C(‘212Fhhh‘)

// 正则学习地址：https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md
//在线练习地址(可将下面的正则复制进去查看匹配效果)： https://regex101.com/r/IDDARt/1
// 正先行断言 练习 千分位
let divide = /B(?=(d{3})+)/g;
/*
B 匹配的是非字符边界
 匹配字符边界
匹配一个非字符边界，并且其后 存在一次或多次 3位数字其后还得有个字符边界，即字符串最右边
例： ‘123‘ B 指的就是 1和2之间 2和3之间  
         指的是 1的左边和3的右边
*/
let strDivide = ‘123456789‘;
// console.log(divide.exec(strDivide));
console.log(strDivide.replace(divide, ‘,‘) ); //123,456,789

上面代码中：最后一个实现千分位的正则匹配效果（查看效果：代码注释中有链接地址）：