javascript - 尝试使用 .innerHTML 呈现内容时，如何过滤除 b、u 和 i 之外的所有其他标签

Question

我正在使用 textarea 收集表单中的文本，并计划使用 .innerHTML 呈现该文本以便用户可以将内容设置为粗体、斜体和下划线。我可能会决定增加灵 active 以允许使用样式属性的彩色文本。
我考虑过使用正则表达式来匹配文本，但我希望有一个更优雅的解决方案。
这是我目前拥有的

      <div class="fullblog-container">
        <textarea name="title" id="fullblogTitle"></textarea>
      </div>
      <button class="addBlock" onclick="submitBlocks()">SUBMIT</button>

       const fullBlogContainer = document.querySelector(".fullblog-container");
      function submitBlocks() {
        const allChildren = Array.from(fullBlogContainer.children);
        const filterChildren = allChildren.filter((elem) => elem.tagName != "BUTTON");
        console.log(filterChildren[0].value);
      }

上面的代码从我所有的文本区域(目前只有 1 个文本区域)获取输出。
我计划使用 .innerHTML 渲染该值并希望保留 b、u、i 标签和可能带有样式属性的 div 标签，并将其余部分视为文本。
编辑:虽然我的问题导致防止注入(inject)攻击(存在类似问题)，但我需要一种方法将某些部分呈现为文本，将其他部分呈现为 html，但我还没有找到合适的解决方案。
PS:请不要使用 JQuery

Answer 1

一种方法是将所有元素转换为您想要允许的文本和白名单元素。与 innerText浏览器将所有 html 实体转换为它们的代码。然后您可以使用 innerHTML 读取实际代码并替换列入白名单的元素。

const dangerousContent = '\<script\>dangerousFunction()\</script\>';
const content = 'Text \<b\>bold\</b\> \<i\>italic\</i\>  \<u\>underline\</u\>';

const container = document.getElementById('container');

container.innerText += dangerousContent;
container.innerText += content;
container.innerHTML = container.innerHTML
                               .replace(/&lt;b&gt;/g, '\<b\>')
                               .replace(/&lt;\/b&gt;/g, '\</b\>')
                               .replace(/&lt;i&gt;/g, '\<i\>')
                               .replace(/&lt;\/i&gt;/g, '\</i\>')
                               .replace(/&lt;u&gt;/g, '\<u\>')
                               .replace(/&lt;\/u&gt;/g, '\</u\>');

<span id="container"></span>