make_html_elements

last update: 2020/12/19
const templateLiteralToHtmlStrings = (strings, ...values) => {
  return strings.reduce((accumlate, str, i) => {
    return accumlate + escapeHtml(values[i - 1]) + str;
  });
};

const htmlStringsToHtmlElements = (htmlStrings) => {
  const template = document.createElement('template');
  template.innerHTML = htmlStrings;
  return template.content.firstElementChild;
};

const escapeHtml = (str) => {
  if(!str){return '';}
  return str.replace(/["'`<>&]/g, function(m) {
    return {
      '"': '&quot;',
      "'": '&#x27;',
      '`': '&#x60;',
      '<': '&lt;',
      '>': '&gt;',
      '&': '&amp;',
    }[m]
  });
};


const val1 = 'val1';
const val2 = 'v"`a\'><l2&';

const htmlStrings = templateLiteralToHtmlStrings`<ul>
  <li>${val1}</li>
  <li>${val2}</li>
</ul>`;

const htmlElements = htmlStringsToHtmlElements(htmlStrings);

console.log(htmlStrings);
console.log(htmlElements);

code_popup