This is a quickie simple post on JavaScript techniques. We're going to cover how to use the regular expression driven replace(..)
with JavaScript string
values.
这是有关JavaScript技术的简单快速文章。 我们将介绍如何将正则表达式驱动的replace(..)
与JavaScript string
值一起使用。
All string
values have a replace(..)
method available to them. This method allows you to pass a regular expression (or a string
that will be interpreted as the pattern for a dynamically-created regular expression!) to represent what should be found in the main string
value for replacing.
所有string
值都具有一个replace(..)
方法。 此方法允许您传递正则表达式(或将被解释为动态创建的正则表达式的模式的string
!)来表示应在替换的主string
值中找到的内容。
单人vs全球 (Single vs Global)
Consider:
考虑:
var a = "The quick brown fox jumped over the lazy dog.";
var pattern = /the/i;
a.replace( pattern, "THE" );
// THE quick brown fox jumped over the lazy dog.
You can see only the first "The" was replaced. Many developers just leave that fact as is, and never ask, "Why?".
您只能看到第一个“ The”被替换了。 许多开发人员只是按原样保留了这一事实,而从未问过“为什么?”。
Well, it's because you didn't use a global regular expression (that is, with the g
flag), so clearly JS only applies the expression in a single context. See:
嗯,这是因为您没有使用全局正则表达式(即带有g
标志),所以很明显,JS仅将表达式应用于单个上下文。 看到:
var a = "The quick brown fox jumped over the lazy dog.";
var pattern = /the/ig; // notice "g" here now!
a.replace( pattern, "THE" );
// THE quick brown fox jumped over THE lazy dog.
The replacer string
("THE"
in our example) can include certain special commands, such as "$1" for dropping in the value of the first ( )
group match (there is none in our example!).
替换string
(在我们的示例中为"THE"
)可以包含某些特殊命令 ,例如用于删除first ( )
组match的值的“ $ 1”(在我们的示例中没有!)。
function
作为替代品 (function
As Replacer)
What if you wanted to do a more sophisticated replacement, like for instance capitalizing any of a set of words found, using a pattern like this?
如果您想进行更复杂的替换,例如使用这种模式将找到的一组单词中的任何一个大写,该怎么办?
var pattern = /quick|brown|lazy/ig;
Obviously, hard-coding the "THE"
replacer string
won't work now!
显然,硬编码"THE"
替换string
现在不起作用!
But it's a little known fact that the replacer can be a function
instead. For example:
但这是一个鲜为人知的事实,替代者可以改为function
。 例如:
var a = "The quick brown fox jumped over the lazy dog.";
var pattern = /quick|brown|lazy/ig;
a.replace( pattern, function replacer(match){
return match.toUpperCase();
} );
// The QUICK BROWN fox jumped over the LAZY dog.
The function
replacer gets several arguments. The first is always the matched string, which is often all you want/need. If the pattern has any ( )
group match(es), those will be passed as the next argument(s). The next argument will be the numeric indexed position of the match in the bigger string.
function
替换器有几个参数。 第一个始终是匹配的字符串,通常是您想要/需要的所有字符串。 如果模式具有任何( )
组匹配项,则将这些匹配项作为下一个参数传递。 下一个参数将是较大字符串中匹配项的数字索引位置。
The final argument is the full original string
being replaced against, not the current in-progress string value that's being processed.
最后一个参数是要替换的完整原始 string
,而不是正在处理的当前进行中的字符串值。
Another place where the function
replacer comes in handy is if the string you're replacing with already has some of the special replacer string
command sequences, like "$1" instance, because the return
ed value from the function is not interpolated like the regular string
replacer is:
function
替换器派上用场的另一个地方是,如果您要替换的字符串已经具有一些特殊的替换器string
命令序列,例如“ $ 1”实例,因为从函数return
ed值不像常规string
那样被内插替代者是:
var prices = {
"pr_1": "$1.99",
"pr_2": "$9.99",
"pr_3": "$5.00"
};
var template = ".."; // some ecommerce page template
template.replace(
/(<span id=")(.*?)(">)(<\/span>)/g,
function(match,$1,$2,$3,$4){
return $1 + $2 + $3 + prices[$2] + $4;
}
);
The value "$1.99"
couldn't have been used as a string
replacer because "$1" would have been interpreted as the first match. The only other option is to pre-escape your string
replacer values, like "$$1.99", but no one wants to do that, so the function
replacer is better.
不能将值"$1.99"
用作string
替换器,因为“ $ 1”将被解释为第一个匹配项。 唯一的其他选择是预转义string
替换值,例如“ $$ 1.99”,但是没人愿意这样做,因此function
替换更好。
摘要 (Summary)
Regular expression string
replace is a more powerful mechanism than most developers give JS credit for.
正则表达式string
替换是一种比大多数开发人员认为更强大的机制。
Global /g
regular expressions and function
replacer values are just some of the useful but not as well known features of regular expression patterns and replace(..)
.
全局/g
正则表达式和function
replace(..)
值只是正则表达式模式和replace(..)
一些有用但不是众所周知的功能。