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

Question

我正在使用 textarea 收集表单中的文本，并计划使用 .innerHTML 呈现该文本，以便用户可以将内容设置为粗体、斜体和下划线。我可能会决定增加灵活性以允许使用样式属性的彩色文本。

我曾考虑使用正则表达式来匹配文本，但我希望有一个更优雅的解决方案。

这是我目前拥有的

      <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);
      }

上面的代码从我所有的textarea（目前只有1个textarea）获取输出。

我计划使用.innerHTML 渲染该值，并希望保留 b、u、i 标记和可能带有样式属性的 div 标记，并将其余部分视为文本。

编辑：虽然我的问题导致防止注入攻击（存在类似问题），但我需要一种方法将某些部分呈现为文本，将其他部分呈现为 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>