如何在JavaScript中过滤掉HTML中的标签？

JS过滤script

JavaScript提供了多种方法来过滤和操作字符串，特别是当你需要从一段文本中移除<script>标签时，以下是一些常见的方法：

使用正则表达式

正则表达式是一种强大的文本处理工具，可以用来匹配和替换特定的模式，为了移除所有的<script>标签，你可以使用以下代码：

function removeScriptTags(input) {
    return input.replace(/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi, '');
}
let text = "<p>Hello World!</p><script>alert('Hi!');</script><p>Goodbye!</p>";
let filteredText = removeScriptTags(text);
console.log(filteredText); // 输出： <p>Hello World!</p><p>Goodbye!</p>

使用DOM解析器

如果你正在处理HTML内容，并且希望在浏览器环境中进行操作，可以使用DOM解析器来移除<script>标签，这种方法更为安全，因为它不会受到跨站脚本攻击（XSS）的影响。

function removeScriptTagsUsingDOMParser(htmlString) {
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, 'text/html');
    let scripts = doc.getElementsByTagName('script');
    for (let i = scripts.length  1; i >= 0; i) {
        scripts[i].parentNode.removeChild(scripts[i]);
    }
    return doc.body.innerHTML;
}
let htmlContent = "<div><p>Hello World!</p><script>alert('Hi!');</script><p>Goodbye!</p></div>";
let filteredHtml = removeScriptTagsUsingDOMParser(htmlContent);
console.log(filteredHtml); // 输出： <div><p>Hello World!</p><p>Goodbye!</p></div>

相关问题与解答

Q1: 如何确保在使用正则表达式移除<script>标签时，不会误删其他包含<script>子串的标签？

A1: 为了避免误删其他包含<script>子串的标签，我们可以调整正则表达式以确保它只匹配完整的<script>标签，在上面的示例中，我们使用了/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi这个正则表达式，其中b表示单词边界，[^<]匹配任何非<字符，而(?:(?!</script>)<[^<]*)确保我们不会匹配到嵌套的<script>

Q2: 为什么使用DOM解析器比简单的字符串替换更安全？

A2: 当处理HTML内容时，直接操作字符串可能会导致安全问题，尤其是当内容来自不可信的来源时，使用DOM解析器可以确保所有的HTML标签都被正确地解析和处理，从而避免了潜在的跨站脚本攻击（XSS），DOM解析器还可以处理更复杂的HTML结构，如嵌套标签、属性等，使得过滤更加可靠。