Question

有没有办法在javascript中做类似于ruby gsub的东西？我有一个本地html文件，我想处理并用内容替换某些模板变量，但我无法弄清楚如何用新内容替换模板变量。 html包含如下所示的片段：

<div id="content">
    <h1>{{title}}</h1>
    {{content}}
</div>

现在，如果我将每个模板变量包装在一个命名div中，那么我可以使用类似jquery的replaceAll方法来替换模板变量及其内容，但我无法弄清楚如何在不将每个变量包装在div中的情况下执行此操作。

我只想做像$（'document'）。gsub（“{{title}}”，“我是标题”）。

有人有什么想法吗？

感谢您的帮助！

Answer 1

如果其他人一般都在寻找gsub的等价物，那么这只会取代第一场比赛：

"aa".replace("a", "b") // "ba"

//g取代所有比赛：

"aa".replace(/a/g, "b") // "bb"
"aa".replace(new RegExp("a", "g"), "b"); // "bb"

Answer 2

您可以通过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');

Answer 3

好吧，你可以将String.replace与正则表达式一起使用，但实际上，你可以使用的是jQuery模板。

http://api.jquery.com/category/plugins/templates/

Answer 4

我最近使用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获取单击的记录。

Answer 5

我相信这可能是一个小胡子模板。您可能想要检查mustache.js。我想你可以把它编译成JS。

在javascript中是否存在与gsub类似的内容？

5 个答案: