在JavaScript中使用字符串替换

谁践踏了优雅 2023-02-22 03:45 8阅读 0赞

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"` )可以包含[某些特殊命令][certain special commands] ，例如用于删除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(..)`一些有用但不是众所周知的功能。

> 翻译自: [https://davidwalsh.name/string-replace-javascript][https_davidwalsh.name_string-replace-javascript]

[certain special commands]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter
[https_davidwalsh.name_string-replace-javascript]: https://davidwalsh.name/string-replace-javascript