Escape variables HTML inside a function in JS

Question

I need to escape variables for html inside a function in JS, I have something like this:

function (foo1) {
   var cat = '<li id="'+ foo1.*** +'"></li>'
           + '<div aria-label="' + foo1.*** + '" tabindex = "0">'
           + '<button id="'+ foo1.*** +'"></button>'
           + '</div>'
}

Can this escape be accomplished somehow?

Thanks for the help.

Answer 1

If you want to solve this problem more elegantly you could use a template engine such as provided by underscore.js (from the docs):

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

Or https://www.npmjs.com/package/jinja.js/. If you use a framework this functionality might be already built in.