有没有办法在 javascript 中做类似于 ruby gsub 的事情？我有一个本地 html 文件，我想处理并用内容替换某些模板变量，但我不知道如何用新内容替换模板变量。 html 包含如下片段：
<div id="content">
<h1>{{title}}</h1>
{{content}}
</div>
现在，如果我将每个模板变量包装在一个命名的 div 中，那么我可以使用类似 jquery 的 replaceAll 方法将模板变量替换为其内容，但如果不将每个变量包装在 div 中，我无法弄清楚如何做到这一点。
我只想做类似 $('document').gsub("{{title}}", "I am a title") 之类的事情。
有人有什么想法吗？
感谢您的帮助！
【问题讨论】：
标签： javascript jquery css ruby
我相信这可能是一个小胡子模板。您可能需要检查 mustache.js。我想你也许可以把它编译成 JS。
【讨论】：
如果其他人通常在寻找与 gsub 等效的内容，这只会替换第一个匹配项：
"aa".replace("a", "b") // "ba"
//g 替换所有匹配项：
"aa".replace(/a/g, "b") // "bb"
"aa".replace(new RegExp("a", "g"), "b"); // "bb"
【讨论】：
我最近使用Handlebars 从表中获取数据属性（模板）并从其中一行注入另一个值（记录 id）：
// data-row-url="http://example.com/people/{{id}}"
var table = $(this).closest('.data_grid table');
if(table.attr('data-row-url')) {
var record_id = $(this).data('record-id')
var show_url_template = table.data('row-url');
var url_template = Handlebars.compile(show_url_template)
var url = url_template({ id: record_id });
$.getScript(url);
}
对于上下文，此代码从表的 tr 元素的 onclick 事件内部运行，并通过 ajax 获取单击的记录。
【讨论】：
您可以通过 DOM 元素的 innerHTML 属性访问原始 HTML，或者使用 JQuery 的 html 属性包装它，然后执行替换：
var html = $(document).html();
$(document).html(html.replace('{{title}}', 'I am a title');
编辑：
正如 Antti Haapala 所指出的，替换整个文档 HTML 可能会产生您不想处理的副作用，例如重新加载脚本。因此，您应该在执行替换之前深入到最具体的 DOM 元素，即：
var element = $('#content');
var html = element.html();
element.html(html.replace('{{title}}', 'I am a title');
【讨论】：
好吧，您可以使用带有正则表达式的 String.replace，但实际上，您可以使用 jQuery 模板。
【讨论】：