tHTML uses parseFromString instead of innerHTML. showHelp now uses tHTML

edit/edit.js

@@ -1936,17 +1936,10 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
   });
 }
 
-function showHelp(title, text) {
+function showHelp(title, body) {
   const div = $('#help-popup');
   div.classList.remove('big');
-
+  $('.contents', div).appendChild(tHTML(body));
-  const contents = $('.contents', div);
-  if (text instanceof HTMLElement) {
-    contents.textContent = '';
-    contents.appendChild(text);
-  } else {
-    contents.innerHTML = text;
-  }
   $('.title', div).textContent = title;
 
   if (getComputedStyle(div).display === 'none') {

js/localization.js

@@ -28,13 +28,23 @@ function tE(id, key, attr, esc) {
 }
 
 
-function tHTML(html) {
+function tHTML(html, tag) {
-  const node = document.createElement('div');
+  // body is a text node without HTML tags
-  node.innerHTML = html.replace(/>\s+</g, '><'); // spaces are removed; use &nbsp; for an explicit space
+  if (typeof html === 'string' && /<\w+/.test(html) === false) {
+    return document.createTextNode(html);
+  }
+  if (typeof html === 'string') {
+    html = html.replace(/>\s+</g, '><'); // spaces are removed; use &nbsp; for an explicit space
+    if (tag) {
+      html = `<${tag}>${html}</${tag}>`;
+    }
+    const node = (new DOMParser()).parseFromString(html, 'text/html').querySelector('body').firstElementChild;
     if (html.includes('i18n-')) {
       tNodeList(node.getElementsByTagName('*'));
     }
-  return node.firstElementChild;
+    return node;
+  }
+  return html;
 }