深入理解JavaScript-replace-守望者-AIR技术交流

破晓发表于 2016-8-11 14:19:31

深入理解JavaScript-replace

<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">来源：http://div.io/topic/836<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">replace方法是属于String对象的，可用于替换字符串。<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">简单介绍:</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">String.replace(searchValue,replaceValue)</code><ol style="padding-left: 30px; margin-bottom: 14px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>String:字符串</li><li>searchValue：字符串或正则表达式</li><li>replaceValue:字符串或者函数</li></ol><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">字符串替换字符串</h2><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'I am loser!'.replace('loser','hero')
//I am hero!</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">直接使用字符串能让自己从loser变成hero，但是如果有2个loser就不能一起变成hero了。<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'I am loser,You are loser'.replace('loser','hero');
//I am hero,You are loser</code></pre><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">正则表达式替换为字符串</h2><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'I am loser,You are loser'.replace(/loser/g,'hero')
//I am hero,You are hero</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">使用正则表达式，并将正则的global属性改为true则可以让所有loser都变为hero<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">有趣的替换字符</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">replaceValue</code> 可以是字符串。如果字符串中有几个特定字符的话，会被转换为特定字符串。<table style="width: 858px; border: 1px solid rgb(220, 220, 220); border-spacing: 0px; margin: 10px auto; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><tbody><tr><th style="padding: 5px 10px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(220, 220, 220); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(220, 220, 220); line-height: 2; background: rgb(252, 252, 252);">字符</th><th style="padding: 5px 10px; border-right-style: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(220, 220, 220); line-height: 2; background: rgb(252, 252, 252);">替换文本</th></tr><tr><td style="padding: 5px 10px; font-size: 14px; border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220);">$&</td><td style="padding: 5px 10px; font-size: 14px; border-right-style: none; border-bottom-color: rgb(220, 220, 220);">与正则相匹配的字符串</td></tr><tr><td style="padding: 5px 10px; font-size: 14px; border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220);">$`</td><td style="padding: 5px 10px; font-size: 14px; border-right-style: none; border-bottom-color: rgb(220, 220, 220);">匹配字符串左边的字符</td></tr><tr><td style="padding: 5px 10px; font-size: 14px; border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220);">$'</td><td style="padding: 5px 10px; font-size: 14px; border-right-style: none; border-bottom-color: rgb(220, 220, 220);">匹配字符串右边的字符</td></tr><tr><td style="padding: 5px 10px; font-size: 14px; border-right-color: rgb(220, 220, 220); border-bottom-style: none;">$1,$2,$3,…,$n</td><td style="padding: 5px 10px; font-size: 14px; border-right-style: none; border-bottom-style: none;">匹配结果中对应的分组匹配结果</td></tr></tbody></table><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">使用$&字符给匹配字符加大括号</h3><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">var sStr='讨论一下正则表达式中的replace的用法';
sStr.replace(/正则表达式/,'{$&}');
//讨论一下{正则表达式}中的replace的用法</code></pre><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">使用$`和$'字符替换内容</h3><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'abc'.replace(/b/,"$`");//aac
'abc'.replace(/b/,"$'");//acc</code></pre><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">使用分组匹配组合新的字符串</h3><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'nimojs@126.com'.replace(/(.+)(@)(.*)/,"$2$1")//@nimojs</code></pre><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">replaceValue参数可以是一个函数</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">String.replace(searchValue,replaceValue)</code> 中的replaceValue可以是一个函数.<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">如果replaceValue是一个函数的话那么，这个函数的arguments会有n+3个参数（n为正则匹配到的次数）<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">先看例子帮助理解：<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">function logArguments(){
console.log(arguments);//["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"] 
return '返回值会替换掉匹配到的目标'
}
console.log(
'nimojs@126.com'.replace(/(.+)(@)(.*)/,logArguments)
)</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">参数分别为<ol style="padding-left: 30px; margin-bottom: 14px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>匹配到的字符串（此例为nimojs@126.com,推荐修改上面代码的正则来查看匹配到的字符帮助理解)</li><li>如果正则使用了分组匹配就为多个否则无此参数。（此例的参数就分别为<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">"nimojs", "@", "126.com"</code>。推荐修改正则为/nimo/查看控制台中返回的arguments值）</li><li>匹配字符串的对应索引位置（此例为0）</li><li>原始字符串(此例为nimojs@126.com)</li></ol><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">使用自定义函数将A-G字符串改为小写</h3><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">'JAVASCRIPT'.replace(//g,function(){
return arguments[0].toLowerCase();
})//JaVaScRIPT</code></pre><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">使用自定义函数做回调式替换将行内样式中的单引号删除</h3><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">';demo'.replace(/\'[^']+\'/g,function(){
var sResult=arguments[0];
console.log(sResult);//'微软雅黑'
sResult=sResult.replace(/\'/g,'');
console.log(sResult);//微软雅黑
return sResult;
})//demo</code></pre><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">最后的小试牛刀</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这一节是交给阅读者发挥的内容：<h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">洗扑克</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">需要将ThisNimojs-JavaScript使用正则替换成 <code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">TJhaivsaNSicmroijpst</code>

页: [1]

守望者--AIR技术交流's Archiver

深入理解JavaScript-replace