在线编辑器HTML5怎么去除？在线编辑器去除HTML5标签的常用方法有哪些

在线编辑器在处理用户输入内容时，经常需要过滤掉HTML5特有的标签，比如<article>、<video>、<canvas>等，避免非预期的内容展示或者安全风险。不同的使用场景可以选择不同的去除方式，下面分别介绍几种常用的实现方法。

前端侧过滤HTML5标签

如果只需要在前端展示前处理内容，可以使用JavaScript的正则表达式或者DOM操作来过滤HTML5标签。这种方式适合对实时性要求高的场景，但是需要注意前端过滤可以被用户绕过，不能单独作为安全校验手段。

使用正则表达式过滤

可以通过匹配HTML5标签的特征，将对应的标签替换为空字符串，示例代码如下：

// 定义需要去除的HTML5标签列表
const html5Tags = ['article', 'section', 'nav', 'aside', 'header', 'footer', 'video', 'audio', 'canvas', 'figure', 'figcaption', 'details', 'summary', 'mark', 'time', 'meter', 'progress'];
// 拼接正则表达式，匹配这些标签及内部内容
const tagReg = new RegExp(`<(${html5Tags.join('|')})[^>]*>.*?</\1>|<(${html5Tags.join('|')})[^>]*\/?>`, 'gi');
// 待处理的内容
const rawContent = '<article>这是HTML5文章标签内容</article><p>普通段落内容</p><video src="test.mp4"></video>';
// 过滤后的内容
const filteredContent = rawContent.replace(tagReg, '');
console.log(filteredContent); // 输出：<p>普通段落内容</p>

使用DOM操作过滤

通过创建临时DOM元素，遍历子节点移除HTML5标签，这种方式比正则更精准，不会误匹配文本内容中的类似标签的字符串：

function removeHtml5Tags(content) {
    // 创建临时容器
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = content;
    // 需要移除的HTML5标签列表
    const html5Tags = ['article', 'section', 'nav', 'aside', 'header', 'footer', 'video', 'audio', 'canvas', 'figure', 'figcaption', 'details', 'summary', 'mark', 'time', 'meter', 'progress'];
    // 遍历所有子节点
    const allNodes = tempDiv.querySelectorAll(html5Tags.join(','));
    allNodes.forEach(node => {
        // 将标签内部的内容插入到标签前面，然后移除标签
        while (node.firstChild) {
            node.parentNode.insertBefore(node.firstChild, node);
        }
        node.parentNode.removeChild(node);
    });
    return tempDiv.innerHTML;
}

// 测试
const testContent = '<header>头部内容</header><p>正文内容</p><canvas></canvas>';
console.log(removeHtml5Tags(testContent)); // 输出：头部内容<p>正文内容</p>

在线编辑器配置过滤规则

大部分成熟的在线编辑器都支持自定义过滤规则，比如Ueditor、TinyMCE等，可以直接在编辑器初始化时配置允许或者禁止的标签，从根源上阻止HTML5标签的输入。

Ueditor配置示例

在Ueditor的配置文件ueditor.config.js中，可以修改whitList配置，只保留允许的标签，排除HTML5标签：

// ueditor.config.js 中的配置项
UE.getEditor('editor', {
    // 白名单配置，只允许p、div、span、img、a等基础标签
    whitList: {
        p: [],
        div: ['class', 'style'],
        span: ['class', 'style'],
        img: ['src', 'alt', 'width', 'height'],
        a: ['href', 'title'],
        strong: [],
        em: []
        // 不添加HTML5相关标签，即可实现过滤
    }
});

后端侧过滤HTML5标签

后端过滤是更安全的方案，因为前端过滤可以被用户绕过，所有用户输入的内容都需要在后端再次校验。不同后端语言的实现逻辑类似，都是通过解析HTML或者正则匹配过滤标签。

PHP实现示例

使用PHP的strip_tags函数结合自定义允许标签，可以过滤掉HTML5标签：

<?php
// 允许的基础标签，不包含HTML5标签
$allowTags = '

';
$rawContent = '
HTML5内容
正常内容
';
// 过滤标签
$filteredContent = strip_tags($rawContent, $allowTags);
echo $filteredContent; // 输出：HTML5内容
正常内容
?>

Java实现示例

使用Jsoup库解析HTML，移除指定的HTML5标签：

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import java.util.Arrays;
import java.util.List;

public class HtmlFilter {
    public static String removeHtml5Tags(String content) {
        Document doc = Jsoup.parse(content);
        // 需要移除的HTML5标签列表
        List html5Tags = Arrays.asList("article", "section", "nav", "aside", "header", "footer", "video", "audio", "canvas", "figure", "figcaption", "details", "summary", "mark", "time", "meter", "progress");
        for (String tag : html5Tags) {
            // 选择所有对应标签的元素并移除
            doc.select(tag).remove();
        }
        return doc.body().html();
    }

    public static void main(String[] args) {
        String test = "
头部
内容
";
        System.out.println(removeHtml5Tags(test)); // 输出：头部
内容
    }
}

不同场景的选择建议

如果是简单的展示场景，前端过滤即可满足需求；如果是涉及用户输入存储的业务场景，必须同时使用前端过滤和后端过滤，并且优先使用编辑器的内置配置功能，减少自定义开发的工作量。另外需要注意，过滤标签时如果保留标签内部的内容，需要根据业务需求调整逻辑，避免丢失重要信息。