Layui格式化并高亮显示XML

最新推荐文章于 2023-09-11 15:34:14 发布

@Dawn

最新推荐文章于 2023-09-11 15:34:14 发布

阅读量1.5k

点赞数

分类专栏：拓展前端文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_39996389/article/details/103873268

版权

本文介绍了如何利用Layui框架，结合JavaScript、CSS和HTML，实现XML数据的格式化与高亮显示。详细内容包括三个主要步骤：1.js部分涉及XML处理和Layui的集成；2.CSS部分提供样式支持，确保XML结构清晰可见；3.HTML部分展示数据结构。最后，4.效果图展示了实际的应用成果。

摘要由CSDN通过智能技术生成

1.js部分

// 格式化xml 高亮显示
//返回已经处理的xml字符，配合CSS产生高亮
  function formatXml (content) {
    debugger;
    let xml_doc = null;
    const formatContent = content.replace(/[\n\r]/g, "");
    try {
        xml_doc = (new DOMParser()).parseFromString(formatContent, 'text/xml');
    } catch (e) {
        return false;
    }

    function build_xml(list, element, level) {
        let t = [];

        /*level 节点层级。方便前面添加多少个空格缩进*/
        for (let i = 0; i < level; i++) {
            t.push('  ');
        }

        t = t.join("");

        list.push(t + '<<span class="code-key">' + element.nodeName + '</span>>\n');
        for (let i = 0; i < element.childNodes.length; i++) {
            const childLevel = level + 1;
            let childItem = element.childNodes[i];
            let nodeName = childItem