欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript格式化并高亮xml字符串的方法及注意事項(xiàng)

 更新時(shí)間：2018年08月13日 09:02:03   作者：onlyfu  
這篇文章主要介紹了Javascript格式化并高亮xml字符串的方法及注意事項(xiàng),需要的朋友可以參考下

兩個(gè)關(guān)鍵點(diǎn)

1.使用DOMParser解析xml
2.遞歸遍歷xml樹，按格式輸出每一個(gè)節(jié)點(diǎn)

關(guān)于使用DOMParser

此方法目前在IE9以上和其它瀏覽器里都是支持的，所以這里不在寫關(guān)于IE9以下不支持的情況, 具體的使用請(qǐng)?zhí)D(zhuǎn)

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

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('&nbsp;&nbsp;&nbsp;&nbsp;');
    }
    t = t.join("");
    list.push(t + '&lt;<span class="code-key">'+ element.nodeName +'</span>&gt;\n');
    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)) ? 'code-number' : 'code-string';
        let value_txt = '<span class="'+ value_color +'">' + value + '</span>';
        let item = t + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="code-key">' + nodeName +
          '</span>&gt;' + value_txt + '&lt;/<span class="code-key">' + nodeName + '</span>&gt;\n';
        list.push(item);
      } else {
        build_xml(++index, list, element.childNodes[i]);
      }
    }
    list.push(t + '&lt;/<span class="code-key">'+ element.nodeName +'</span>&gt;\n');
  }
  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;}

效果

注意

DOMParser在解析xml時(shí)，如果xml字符串里有些特殊的字符，解出來的樹節(jié)點(diǎn)有些是不需要的，會(huì)倒置遍歷節(jié)點(diǎn)失敗。

總結(jié)

以上所述是小編給大家介紹的Javascript格式化并高亮xml字符串，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論