Question

我正在尝试整理一个小型演示，使用客户端模板进行简短的谈话。我的regexp是动态创建的，目的是在一个字符串中替换它自己的实例，但是由于一些奇怪的原因它没有工作，我控制台记录了重要部分，有人可以建议吗？

我的HTML：

<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/

Answer 1

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

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.
}

Demo Fiddle

Answer 2

您也可以撤消登录并匹配所有{...}，然后尝试获取数据：

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

Answer 3

在linkTemplate中替换第一个数据的内容后，您没有更多的占位符可替换第二组数据。保存到临时sting以添加到结果。

在RegEx中匹配模板字符串

3 个答案: