Question

我有一个角度应用程序，但我有一个页面需要预先渲染而没有javascript（用于打印和PDF），一些内容加载了Angular变量输入{{field（10）}}

我预加载内容但需要一种方法来查找和替换字符串，以便：

{{field(10)}}

更改为此

的值

submission.inputs[10]

例如：

var string = 'This is some content: {{field[10]}}';
var submission.inputs[10] = 'replace value';

我希望新字符串是这个

var newString = 'This is some content: replace value';

这是在Node中运行，因此它具有最新版本的Javascript。

我试过了：

var newString = string.replace(/\{{(.+?)}}/g, submission.inputs[$1]);

但我不认为我的语法是正确的。

Answer 1

您当前的正则表达式会使用其捕获组提取{{}}中包含的所有文本。但是你只需要替换的索引，它包含在[]中，而不是整个字符串本身。所以你有两个选择：

修改正则表达式以仅捕获索引，因此看起来像/{{field\[(.+?)\]}}/，其中捕获组现在只接受括号内的数字。
单独保留原始正则表达式，但更改replace函数以从返回的匹配中提取数字。在这种情况下，您将使用第二个正则表达式（或其他方法）从匹配的字符串中提取数字（在这种情况下，从"10"中获取"field[10]"）。

这是一个展示两者的例子：

var string = 'This is some content: {{field[10]}}';
var submission = {inputs: []};
submission.inputs[10] = 'replace value';

// I want the new string to be this
// var newString = 'This is some content: replace value';

var newString = string.replace(/{{field\[(.+?)\]}}/g, (match, cap1) => submission.inputs[cap1]);
console.log(newString)

// OR:

var otherNewString = string.replace(/\{{(.+?)}}/g, (match, cap1) => submission.inputs[cap1.match(/\[(.+?)\]/)[1]]);
console.log(otherNewString)

Answer 2

您可以使用以下正则表达式在{{field[和]}}之间提取内容，如下面的代码段所示。该代码段在替换函数中使用回调并将捕获的组的值传递给它，以便可以返回适当的值（submission.inputs[b]其中b是您想要的数字：10情况）。

{{[^[]+\[([^\]]+)]}}

{{按字面意思匹配
[^[]+匹配[除{/ 1}}之外的任何字符
\[按字面意思匹配[
([^\]]+)将除]之外的任何字符一次或多次捕获到捕获组1中。这是您想要的值
]}}按字面意思匹配

var string = 'This is some content: {{field[10]}}'
var submission = {inputs:[]}
submission.inputs[10] = 'replace value'
var newString = string.replace(/{{[^[]+\[([^\]]+)]}}/g, function(a, b) { return submission.inputs[b] })
console.log(newString)

Javascript使用变量值查找和替换字符串

2 个答案: