Does something similar to gsub exist in javascript?

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

If others were looking for an equivalent to gsub in general, this only replaces the first match:

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

//g replaces all matches:

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

Answer 2

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');

Answer 3

Well, you can use String.replace with a regex, but really, what you could use are jQuery Templates.

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

Answer 4

I recently used Handlebars to take a data attribute (template) from a table and inject another value (record id) from one of its rows:

// 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);                                                   
}  

For context this code runs from inside an onclick event for the table's tr elements and fetches the clicked record via ajax.

Answer 5

I believe that might be a mustache template. You might want to check mustache.js. I think you might be able to compile that to JS.