匹配正则表达式中的模板化字符串

Matching a templated string in RegExp

本文关键字：字符串 正则表达式      更新时间：2023-09-26

我正在尝试整理一个小型演示，该演示使用客户端模板进行简短的演讲。我的正则表达式是动态创建的，旨在替换字符串中的自身实例，但由于某种奇怪的原因它不起作用，我已经控制台记录了重要部分，有人可以建议吗？

我的网页：

<script type="text/template" id="link">
  <a href="{href}">
    {title}
  </a>
</script>

还有我的 JavaScript 在 jsFiddle 及以下：

var linkTemplate = document.querySelector('#link').innerHTML.replace(/^'s+|'s+$/g, '');
var data = [{
"title": "Google",
"href": "//google.com"
},{
"title": "Yahoo",
"href": "//yahoo.com"
}];
for (var i = 0; i < data.length; i++) {
var obj = data[i];
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        var regexp = new RegExp(''{' + key + ''}', 'i');
        console.log(regexp);
        linkTemplate.replace(regexp, 'l');
        console.log(obj[key]);
    }
}
document.body.innerHTML += linkTemplate;
}

http://jsfiddle.net/K9z6C/

如果我正确理解了您的查询，则需要进行以下更改：

linkTemplate = linkTemplate.replace(regexp, 'l');

原因 - .replace()返回一个新字符串，其中模式的部分或全部匹配项由替换替换。

编辑：根据您在MC ND的答案中发布的样本小提琴进行了更新。更新的代码如下：

for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    link = linkTemplate; //set the temporary variable with the template script for every data item
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            var regexp = new RegExp(''{' + key + ''}', 'g');
            link = link.replace(regexp, obj[key]); //replace the href and title based on data
        }
    }
    document.body.innerHTML += link + '<br/>'; //add the value from the temporary variable to document body.
}

演示小提琴

您还可以反转登录并匹配所有{...}，然后尝试获取数据：

var str = 'hello {name}, you are {age} years old',
    tpl = function(str, data) {
        return str.replace(/'{(.*?)'}/g, function(_, a) { return data[a]; });
    };
tpl(str, {name: 'John', age: 47}); // Hello John, you are 47 years old

替换了第一个数据的链接模板中的内容后，就没有更多的占位符可以替换第二组数据。保存到临时刺痛以添加到结果中。

相关文章：