String.prototype.match()
/**
探讨 字符串的String.prototype.match()方法:
官方解释作用: match() 方法可在字符串内检索指定的值,或找到一个(无全局匹配 /g 的正则表达式) 或 多个( 有全局匹配 /g 的正则表达式)正则表达式的匹配
*/
var str = "iid0000ffr iid222ffr";
var substr = str.match(/id(\S*)ff/g); // 有 /g 进行全局匹配,会匹配多次,将匹配到的字符串依次存储到一个数组,匹配所有之后返回数组
console.log(substr[0],substr[1]) // "id0000ff","id222ff" 返回的数组中的每一个元素为匹配到的字符串,不含()中的内容
var substr2 = str.match(/id(\S*)ff/); // 没有 /g,只会匹配一次,匹配到的结果为一个数组,第一个元素为匹配到的字符串,第二个元素为()中的值
console.log(substr2[0],substr2[1]) // "id0000ff", "0000"
String.prototype.replace()
/**
String.prototype.replace() 方法的探讨:
官方解释作用: replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串
总结:
1.0 replace() 方法不会改变原有的字符串,但是会返回替换后的字符串
2.0 replace() 中的正则表达式如果不是全局匹配,只会替换第一次匹配到的字符串, 然后会返回替换后的字符串
3.0 replace() 中的正则表达式如果是全局匹配,则会替换所有匹配到的值,然后会返回替换后的字符串
4.0 replace() 方法中的第二个参数如果是函数,则该函数的执行次数取决于匹配到的次数,该函数的参数有两个,第一参数为匹配到的字符串,第二个参数为 为匹配到的字符串中的的()中的内容即(\w+)
*/
// 将str字符中的 {$id} 替换成 自由设定的值
var str = "<tr><td>{$id}</td><td>{$name}</td></tr>";
str.replace(/\{\$(\w+)\}/,123)
console.log(str) // "<tr><td>{$id}</td><td>{$name}</td></tr>" ,replace() 方法并不会改变str的值
str = str.replace(/\{\$(\w+)\}/,123)
console.log(str) // "<tr><td>123</td><td>{$name}</td></tr>", replace()方法中正则表达式如果不是全局匹配,只会替换第一次匹配到的字符串, 然后会返回替换后的字符串
var str2 = "<tr><td>{$id}</td><td>{$name}</td></tr>";
str2 = str2.replace(/\{\$(\w+)\}/g,123) // 全局匹配
console.log(str2) // "<tr><td>123</td><td>123</td></tr>"
var str3 = "<tr><td>{$id}</td><td>{$name}</td></tr>";
str3.replace(/\{\$(\w+)\}/g,function(match,$1){ // 全局匹配的正则,第二个参数为函数,每次匹配成功一个,执行一次该函数
/*
参数1: match为匹配到的字符串,
参数2: $1 为匹配到的字符串中的第一个的()中的内容即(\w+)
*/
console.log(match,$1) // {$id} id {$name} name
})
// 案例1: 字符串替换
function formatStr(str,data) {
return str.replace(/\{\$(\w+)\}/g,function(res,res1) {
return data[res1] || ''
})
}
var result = formatStr(str3,{
id: '账号: 123456',
name: '姓名: 小峰'
})
console.log(result) // "<tr><td>账号: 123456</td><td>姓名: 小峰</td></tr>"
// 案例二: 特殊字符转义
function formatHtml(str) {
return str.replace(/[<>"&]/g, function (match) {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case '"':
return """;
case "&":
return "&";
}
})
}
var str = '<p attr="myattr">侧睡规划反馈会更快乐发货价格和发动机</p>'
console.log(formatHtml(str)) // <p attr="myattr">侧睡规划反馈会更快乐发货价格和发动机</p>