Heim  >  Artikel  >  Web-Frontend  >  Wie formatiere und markiere ich eine XML-Zeichenfolge in js? (mit Code)

Wie formatiere und markiere ich eine XML-Zeichenfolge in js? (mit Code)

不言
不言Original
2018-08-13 10:07:422848Durchsuche

本篇文章给大家带来的内容是关于js如何格式化xml字符串并高亮?(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

两个关键点

  1. 使用DOMParser解析xml

  2. 递归遍历xml树,按格式输出每一个节点

关于使用DOMParser

此方法目前在IE9以上和其它浏览器里都是支持的,所以这里不在写关于IE9以下不支持的情况。

Javascript代码

/**
 * 格式化xml
 * @param content
 * @returns {*}
 */
this.parse_xml = function(content) {
    let xml_doc = null;
    try {
        xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r]/g, ""), 'text/xml');
    } catch (e) {
        return false;
    }

    function build_xml(index, list, element) {
        let t = [];
        for (let i = 0; i < index; i++) {
            t.push(&#39;    &#39;);
        }
        t = t.join("");
        list.push(t + &#39;&lt;<span class="code-key">&#39;+ element.nodeName +&#39;</span>&gt;\n&#39;);
        for (let i = 0; i < element.childNodes.length; i++) {
            let nodeName = element.childNodes[i].nodeName;
            if (element.childNodes[i].childNodes.length === 1) {
                let value = element.childNodes[i].childNodes[0].nodeValue;
                let value_color = !isNaN(Number(value)) ? &#39;code-number&#39; : &#39;code-string&#39;;
                let value_txt = &#39;<span class="&#39;+ value_color +&#39;">&#39; + value + &#39;</span>&#39;;
                let item = t + &#39;    &lt;<span class="code-key">&#39; + nodeName +
                    &#39;</span>&gt;&#39; + value_txt + &#39;&lt;/<span class="code-key">&#39; + nodeName + &#39;</span>&gt;\n&#39;;
                list.push(item);
            } else {
                build_xml(++index, list, element.childNodes[i]);
            }
        }
        list.push(t + &#39;&lt;/<span class="code-key">&#39;+ element.nodeName +&#39;</span>&gt;\n&#39;);
    }

    let list = [];
    build_xml(0, list, xml_doc.documentElement);

    return list.join("");
};

css

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

效果

Wie formatiere und markiere ich eine XML-Zeichenfolge in js? (mit Code)

注意

DOMParser在解析xml时,如果xml字符串里有些特殊的字符,解出来的树节点有些是不需要的,会倒置遍历节点失败。

最后

这些方法已用于YuiAPI

相关推荐:

js的继承方式有哪些?js实现继承的几种方式介绍

js执行机制的概念?js的执行机制的实现方法

Das obige ist der detaillierte Inhalt vonWie formatiere und markiere ich eine XML-Zeichenfolge in js? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn