Question

Is there any way to to do something similar to ruby gsub in javascript? I have a local html file that I want to process and replace certain template variables with content but I cannot figure out how to substitute out the template variables with the new content. The html contains fragments like below:

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

Now if I wrap every template variables in a named div then I can use something like jquery’s replaceAll method to replace the template variable with its content but I cant figure out how to do it without wrapping every variable in a div.

I just want to do something like $(‘document’).gsub(“{{title}}”, “I am a title”).

Anyone have any ideas?

Thanks for your help!

Answer 1

You can access the raw HTML via a DOM element’s innerHTML property, or using JQuery’s html property wrapping it, and then perform the substitution:

var html = $(document).html();
$(document).html(html.replace('{{title}}', 'I am a title');

EDIT:

As pointed out by Antti Haapala, replacing the entire document HTML can have side-effects you don’t want to deal with, like scripts being reloaded. Thus, you should drill down to the most specific DOM element possible before performing the substitution, i.e.:

var element = $('#content');
var html = element.html();
element.html(html.replace('{{title}}', 'I am a title');