js格式化xml并高亮显示关键字

BWrong 发布于2019-08-02 13:57 / 2834人阅读

摘要：构造函数对象解析文本并返回一个对象。要使用，使用不带参数的构造函数来实例化它，然后调用其方法不支持对象。可能是或中的一个。实战格式化高亮显示节点层级。方便前面添加多少个空格缩进将标签转化成实体样式格式格式化效果

w3school XML DOM - DOMParser 对象

DOMParser 解析 XML 标记来创建一个文档。

构造函数

new DOMParser()

DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：

var doc = (new DOMParser()).parseFromString(text)

IE 不支持 DOMParser 对象。相反，它支持使用 Document.loadXML() 的 XML 解析。

DOMParser.parseFromString()

解析 XML 标记

语法

parseFromString(text, contentType)

text 参数是要解析的 XML 标记。

contentType 是文本的内容类型。可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。

实战

   // 格式化xml 高亮显示
  formatXml = function (content) {
    let xml_doc = null;
    const formatContent = content.replace(/[

]/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 + "<" + element.nodeName + ">
");
      for (let i = 0; i < element.childNodes.length; i++) {
        const childLevel = level + 1;
        let childItem = element.childNodes[i];
        let nodeName = childItem.nodeName;
        if (nodeName === "#text") {
          continue;
        }

        if (childItem.childNodes.length <= 1) {
          let value = "";
          if (childItem.childNodes.length === 1) {
            value = childItem.childNodes[0].nodeValue;
          }
          
          // 将html标签转化成实体
          value = value ? value.replace(/&/g, "&").replace(//g, ">") : "";

          let value_color = !isNaN(Number(value)) ? "code-number" : "code-string";

          let value_txt = "" + value + "";
          let item = t + "  <" + nodeName +
            ">" + value_txt + "" + nodeName + ">
";
          list.push(item);
        } else {
          build_xml(list, element.childNodes[i], childLevel);
        }
      }
      list.push(t + "" + element.nodeName + ">
");
    }

    let list = [];
    build_xml(list, xml_doc.documentElement, 0);
    return list.join("");
  };

CSS样式

  .code-string{color:green;}
  .code-number{color:darkorange;}
  .code-boolean{color:#000033;}
  .code-null{color:magenta;}
  .code-key{color:#003377;font-weight:bold;}

eg.

xml 格式

"↵0.0.1article2018-12-25 15:05:001↵    ↵      ↵      63↵      -66480150.1020580000000000000↵    11109319↵    ↵      ↵      63↵      -66480150.1020580000000000000↵    11187043↵  "

格式化效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53473.html

js格式化xml并高亮显示关键字

摘要：构造函数对象解析文本并返回一个对象。要使用，使用不带参数的构造函数来实例化它，然后调用其方法不支持对象。可能是或中的一个。实战格式化高亮显示节点层级。方便前面添加多少个空格缩进将标签转化成实体样式格式格式化效果 w3school XML DOM - DOMParser 对象 DOMParser 解析 XML 标记来创建一个文档。构造函数 new DOMParser() DOMPar...

Dogee 2019-08-23 14:17 评论0 收藏0
提高 JavaScript 开发效率的高级 VSCode 扩展！

摘要：使用高亮类似的扩展更强大的高亮扩展，具有更多功能。为了检查和检查响应，使用了之类的工具。在这里获取这两个扩展自动闭合标记和自动重命名标记。类似的扩展显示提交历史的精美图表等等。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Quokka.js Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行...

zhigoo 2019-08-23 14:00 评论0 收藏0
#私藏项目实操分享# 使用 JavaScript 上传 PDF 和 Excel 等二进制文件到 AB

摘要：这是年的第篇文章，也是汪子熙公众号总共第篇原创文章。使用通过格式发送和文件到服务器关于格式的详细说明，参考开发社区和的文档我在前文例子的基础上稍作修改在里使用两个类型为的标签，分别上传和文件用来测试的本地文件，大小为字节。这是 Jerry 2021 年的第 71 篇文章，也是汪子熙公众号总共第 348 篇原创文章。 Jerry 之前发布过一篇文章不使用任何框架，手写纯 Jav...

peixn 2021-11-23 10:12 评论0 收藏0
一个前端程序猿的Sublime Text3的自我修养

摘要：效果如下配置方法参考下的配置方法完美支持提供了比默认更好的语法高亮，而且他完美支持。语法高亮默认安装的对的支持让人抓狂，帧动画别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光，我建议用完全替代原来的来完成语法高亮。文章转载自本人的博客《三省吾身丶丶》点击查看喜欢的话请疯狂的推荐吧！ ^_^ 本文章会在本人有插件或者设置更新时，进行不定时更新偷懒了，图片地址直接设置的博客...

KunMinX 2019-08-22 10:59 评论0 收藏0