如何在ES5原生JS中使用htmlparser解析HTML内容？

1. 修正CDN引入文件 #

你当前引入的runtests.min.js是库的测试文件，并非核心解析代码，需要替换为htmlparser的核心文件；同时该库依赖domhandler生成可操作的DOM树结构，需补充引入：

<script src="https://cdn.jsdelivr.net/npm/htmlparser@1.7.7/htmlparser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/domhandler@2.3.0/domhandler.min.js"></script>
<!-- 若无需测试或requirejs，可移除runtests.min.js、json2.min.js和require.js -->

2. 修正代码中的核心错误 #

• 你混淆了htmlparser和node-html-parser两个不同库，当前项目用的是前者，无需require(['node-html-parser'])调用
• htmlparser并非DOM风格API，不能直接用querySelector，需配合DomHandler构建DOM树后遍历查找元素

3. 完整可运行代码示例 #

function searchCategoryFunc(){
    var searchCategory = document.getElementById('searchCategoryInput').value;
    var tempForm = new FormData();
    tempForm.append('searchParameter', searchCategory);
    $.ajax({
        url: "/questionBank/category/view",
        type: "POST",
        serverSide: true,
        data: tempForm,
        processData: false,
        contentType: false,
        success: function(data) {
            // 初始化DOM处理器，解析完成后触发回调
            var handler = new DomHandler(function(error, dom) {
                if (error) {
                    console.error(error);
                    return;
                }
                // 递归遍历DOM树查找body元素
                function findBody(nodes) {
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];
                        if (node.type === 'tag' && node.name === 'body') {
                            return node;
                        }
                        if (node.children && node.children.length > 0) {
                            var result = findBody(node.children);
                            if (result) return result;
                        }
                    }
                    return null;
                }
                var bodyNode = findBody(dom);
                if (bodyNode) {
                    // 将body节点的内部HTML插入到当前页面
                    document.body.innerHTML = htmlparser.DomUtils.getInnerHTML(bodyNode);
                }
            });
            // 初始化解析器并执行解析
            var parser = new htmlparser.Parser(handler);
            parser.parseComplete(data);
        },
        error: function(data) {
            toastr["error"]("Category Deleted Failed");
        }
    });
}

关键说明 #

• DomHandler负责将解析后的内容构建成包含type、name、children属性的DOM节点树
• htmlparser.DomUtils提供工具方法，比如getInnerHTML可将DOM节点转换为HTML字符串
• 适配ES5环境，全部使用var声明变量，避免语法兼容性问题

内容的提问来源于stack exchange，提问作者Mehmet Yağız Maktav