html-template-tag
v4.1.0
Published
ES6 Tagged Template for compiling HTML template strings.
Downloads
11,099
Maintainers
Readme
html-template-tag
ES6 Tagged Template for compiling HTML template strings.
Installation
This package is distributed via npm:
npm install html-template-tag
Usage
String Interpolation
At its core, this module just performs simple ES6 string interpolation.
var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";
var name = `Antonio`;
var string = html`Hello, ${name}!`;
// "Hello, Antonio!"
Nevertheless, it escapes HTML special characters without refraining its use in loops!
var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";
var names = ["Antonio", "Megan", "/><script>alert('xss')</script>"];
var string = html`
<ul>
${names.map((name) => html` <li>Hello, ${name}!</li> `)}
</ul>
`;
// "<ul><li>Hello, Antonio!</li><li>Hello, Megan!</li><li>Hello, /><script>alert('xss')</script>!</li></ul>"
Skip autoscaping
You can use double dollar signs in interpolation to mark the value as safe (which means that this variable will not be escaped).
var name = `<strong>Antonio</strong>`;
var string = html`Hello, $${name}!`;
// "Hello, <strong>Antonio</strong>!"
HTML Template Pre-Compiling
This small module can also be used to pre-compile HTML templates:
var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";
var data = {
count: 2,
names: ["Antonio", "Megan"],
};
var template = ({ names }) => html`
<ul>
${names.map((name) => html` <li>Hello, ${name}!</li> `)}
</ul>
`;
var string = template(data);
/*
"
<ul>
<li>Hello, Antonio!</li>
<li>Hello, Megan!</li>
</ul>
"
*/
NB: The formating of the string literal is kept.
Interpolation inside URI attributes
To avoid XSS attacks, this package removes all interpolation instide URI attributes (more info). This package also ensures that interpolations inside attributes are properly escaped.
License
MIT
Thanks
The code for this module has been heavily inspired on Axel Rauschmayer's post on HTML templating with ES6 template strings and Stefan Bieschewski's comment.