Add css class to element

Find parent element recursively

Setting element style

Disable browser's text selection behaviors.

Enable browser's text selection behaviors.

Get HTML element's design classes.

Get data value from data-attribute

Check element has specific css class

Check element match selector

Remove css class from element

Remove data property

Remove element from parent node.

Set data attribute to target element

Convert text by binding expressions with context.

If expression exists in the context, it will be replaced.
ex) '{{title}}' with context {title: 'Hello!'} is converted to 'Hello!'.
An array or object can be accessed using bracket and dot notation.
ex) '{{odds[2]}}' with context {odds: [1, 3, 5]} is converted to '5'.
ex) '{{evens[first]}}' with context {evens: [2, 4], first: 0} is converted to '2'.
ex) '{{project["name"]}}' and '{{project.name}}' with context {project: {name: 'CodeSnippet'}} is converted to 'CodeSnippet'.

If replaced expression is a function, next expressions will be arguments of the function.
ex) '{{add 1 2}}' with context {add: function(a, b) {return a + b;}} is converted to '3'.

It has 3 predefined block helpers '{{helper ...}} ... {{/helper}}': 'if', 'each', 'with ... as ...'.
1) 'if' evaluates conditional statements. It can use with 'elseif' and 'else'.
2) 'each' iterates an array or object. It provides '@index'(array), '@key'(object), and '@this'(current element).
3) 'with ... as ...' provides an alias.

var template = require('tui-code-snippet/domUtil/template');

var source = 
    '<h1>'
  +   '{{if isValidNumber title}}'
  +     '{{title}}th'
  +   '{{elseif isValidDate title}}'
  +     'Date: {{title}}'
  +   '{{/if}}'
  + '</h1>'
  + '{{each list}}'
  +   '{{with addOne @index as idx}}'
  +     '<p>{{idx}}: {{@this}}</p>'
  +   '{{/with}}'
  + '{{/each}}';

var context = {
  isValidDate: function(text) {
    return /^\d{4}-(0|1)\d-(0|1|2|3)\d$/.test(text);
  },
  isValidNumber: function(text) {
    return /^\d+$/.test(text);
  }
  title: '2019-11-25',
  list: ['Clean the room', 'Wash the dishes'],
  addOne: function(num) {
    return num + 1;
  }
};

var result = template(source, context);
console.log(result); // <h1>Date: 2019-11-25</h1><p>1: Clean the room</p><p>2: Wash the dishes</p>

Toggle css class