在JavaScript中使用字符串替换

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 returned 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(..)一些有用但不是众所周知的功能。

翻译自: https://davidwalsh.name/string-replace-javascript