具有变量、精确匹配和多重匹配的 JavaScript 正则表达式

Question

我正在尝试使用特定变量创建一个正则表达式，它与该变量完全匹配并替换所有可能出现的情况。我在这里找到了一些不同的答案，但它们似乎不适用于我的问题。

这是我的代码:

for(var translation in translations) {
  var regex = new RegExp("^" + translation + "$");
  htmlContent = htmlContent.replace(regex, translations[translation][lang]);
} 

“translations”是一个 JSON，如下所示:

{
"report_a_return-placeholder": {
    "de": "Rücksendung melden",
    "en": "Report a return",
    "nl": "rapporteer een terugkeer",
    "fi": "raportoi palautuksesta",
    "da": "rapportere et afkast",
    "no": "rapporter en retur",
    "sv": "rapportera en avkastning"
  }
}

我正在替换 html 内部:

<div id="Report_a_return">
    <span>report_a_return-placeholder</span>
</div>

当我尝试创建没有 anchor 的正则表达式时，一切正常并且正则表达式会替换。但是，我有一些开头类似的翻译，因此正则表达式替换了它们，即使它不完全匹配。这就是为什么我需要 anchor 。但是当像上面那样做时，没有任何东西被替换!

编辑:

用一个更好的例子来澄清。我有一个问题，例如“pay-placeholder”和“cofirm_and_pay-placeholder”均与“confirm_and_pay-placeholder”匹配。但我希望“pay-placeholder”仅匹配“pay-placeholder”，而“confirm_and_pay-placeholder”仅匹配该内容。那是行不通的。 (如果我只使用 newRexExp('pay-placeholder') 这也匹配字符串“confirm_and_pay-placeholder”)

Answer 1

您的 ^ 字符告诉正则表达式它应该从字符串的开头匹配，而您的 $ 告诉正则表达式匹配到字符串的末尾。

这意味着您的正则表达式仅适用于像 report_a_return-placeholder 这样的字符串，仅此而已。删除这两个字符，一切都会好起来的。

我喜欢使用 regex.com 来检查正在发生的情况并获取正则表达式的完整引用。

regexr.com example

只要每个标签有一个翻译字符串，这个就可以为您工作。

var translations = {'pay_placeholder': 'FooBar'}
var translation = 'pay_placeholder'
var regex = new RegExp('(<\\w+>)(' + translation + ')(<\\/\\w+>)')

var match = '<span>pay_placeholder</span>'.replace(regex, (match, p1, p2, p3, offset, str ) => {
    return p1 + translations[p2] + p3
})

var didntMatch = '<span>confirm_and_pay_placeholder</span>'.replace(regex, (match, p1, p2, p3, offset, str ) => {
    return p1 + translations[p2] + p3
})

console.log(match, didntMatch)