Question

对于一个小实验，我很好奇是否可以用数组中的内容一个接一个地替换下面的字符串。以这样的片段为例：

<div class="container">
<h1>$$Insert text here$$</h1>
<div>
<p>My first paragraph.</p>
<div>$$Insert text here$$</div>
<div>
    <input type="text" name="lname" placeholder="$$Insert text here$$"><br>
    <p>Here some other text</p>
</div>

字符串“$$ Insert text here $$”将始终相同，我想以线性方式替换它们中的每一个，例如：

var replacements=["This is a headline","I am a text","I am yet another text"];

这是否可以通过简单的方式实现，而无需驯服模板引擎？（没有什么可以反对临时，只是好奇）

谢谢！

Answer 1

这是一种方法：

var replacements=["This is a headline","I am a text","I am yet another text"],
    i = 0;
$("body").html(function(j, html) {
    return html.replace(/\$\$Insert text here\$\$/g,function() {
        return replacements[i++];
    });
});

演示：http://jsfiddle.net/d6D68/

请注意，如果$$Insert text here$$文本出现的次数多于替换值，则剩余的文本将设置为“未定义”。

我并不是真的建议在整个机身上进行文本替换，因为（除了其他原因）它会删除任何事件处理程序等，但也许这至少会给你一些想法。（这是处理元素标签和属性之间的替换文本的简单方法。）

Answer 2

var list = ["button", "textarea"], opt = $("body").html();
$.each(list, function(i){
    opt = opt.replace(/\$\$insert\$\$/, list[i]);
});
$("body").html(opt);

基本上你只需要逐个替换它们。无需在replace中创建匿名函数，并使模板引擎变得如此复杂。

http://jsfiddle.net/DerekL/m3sPw/

注意：这应该在附加任何EventListeners之前完成 _{注意2：此代码仅显示使其在所述问题中起作用的最小值。在将文本插入DOM之前转义所有恶意字符以防止双重替换。}

用循环中的数组内容替换html中的字符串

2 个答案: