JS解析，反解析 XML 的一些问题

2016-03-25 15:38:28 星期五

文章底部下面有提供把 字符串 变成 XML 对象的方法。

该方法，在 Chrome48 ，FireFox ，IE11 测试成功！

1.

但是 如果 XML节点，有命名空间，如 <namespace:Node></namespace:Node>

解析就报错，这个报错不是有因为 这个解析方法的问题，而是因为XML格式规定的。

如果XML有使用命名空间的，必须在 root 根节点声明，否则就报错。

如下：

1. <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
2. xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:activiti="http://activiti.org/bpmn"
4. id="review-definitions" typeLanguage="http://www.w3.org/2001/XMLSchema"
5. expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://activiti.org/bpmn20">
6. <activiti:field name="type">
7. <activiti:expression>Shell</activiti:expression>
8. </activiti:field>
9. <bpmndi:BPMNDiagram id="BPMNDiagram_ryantest130">
10. <bpmndi:BPMNPlane bpmnElement="ryantest130" id="BPMNPlane_ryantest130">
11. <BPMNShape id="BPMNShape_a22f130e-fcfc-411f-8323-f8d0b482d01f"
12. bpmnElement="a22f130e-fcfc-411f-8323-f8d0b482d01f">
13. <Bounds height="60" width="60" x="224" y="187"/>
14. </BPMNShape>
15. <BPMNShape id="BPMNShape_6fa449e4-bfd8-499d-bac0-de62e7b39c4a"
16. bpmnElement="6fa449e4-bfd8-499d-bac0-de62e7b39c4a">
17. <Bounds height="60" width="60" x="473" y="194"/>
18. </BPMNShape>
19. <BPMNShape id="BPMNShape_daf837d7-daeb-4c3b-b820-60cb84b82ddd"
20. bpmnElement="daf837d7-daeb-4c3b-b820-60cb84b82ddd">
21. <Bounds height="60" width="60" x="635" y="197"/>
22. </BPMNShape>
23. <BPMNShape id="BPMNShape_e2df6eed-3b1d-4a6e-b674-8e13364cde29"
24. bpmnElement="e2df6eed-3b1d-4a6e-b674-8e13364cde29">
25. <Bounds height="60" width="60" x="227" y="266"/>
26. </BPMNShape>
27. </bpmndi:BPMNPlane>
28. </bpmndi:BPMNDiagram>
29. </definitions>

---

2.有命名空间的节点，在各个浏览器下有兼容性问题

Firefox 下：

xmlDoc.getElementTagName('namespace:Node') 这样的方法，在 FireFox 下可以 获取到子节点， 但是，但是 Chrome48 下，拿不到

Chrome48 下：

xmlDoc.getElementTagName('Node') 需要去掉命名空间才可以获取到该节点

提供的解决方案：可以重写 XMLDocument.proptyoe.getElementsTagName

1. let node = xml.getElementsByTagName('expression');
2. if (!node.length) node = xml.getElementsByTagName('activiti:expression');

解析 字符串 到 XML对象的方法

1. var XML = (function() {
2. /**
3. * 把字符串转换成 XMLDOC 对象
4. * @param {[type]} xmlStr [description]
5. * @return {[type]} [description]
6. */
7. function str2xml(xmlStr) {
8. //跨浏览器，ie和火狐解析xml使用的解析器是不一样的。
9. var xmlStrDoc = null;
10. if (window.DOMParser) {
    // Mozilla Explorer
11. var parser = new DOMParser();
12. xmlStrDoc = parser.parseFromString(xmlStr, "text/xml");
13. } else {
    // Internet Explorer
14. xmlStrDoc = new ActiveXObject("Microsoft.XMLDOM");
15. xmlStrDoc.async = "false";
16. xmlStrDoc.loadXML(xmlStr);
17. }
18. return xmlStrDoc;
19. }
21. /*===============================XML2JSON START==========================*/
22. /**
23. * XML 转成 JSON 对象
24. * @param {[type]} xml [description]
25. * @return {[type]} [description]
26. */
27. function xml2Json(xml) {
28. // Create the return object
29. var obj = {};
30. if (xml.nodeType == 1) {
    // element
31. // do attributes
32. if (xml.attributes.length > 0) {
33. obj["@attributes"] = {};
34. for (var j = 0; j < xml.attributes.length; j++) {
35. var attribute = xml.attributes.item(j);
36. obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
37. }
38. }
39. } else if (xml.nodeType == 3) {
    // text
40. obj = xml.nodeValue;
41. }
42. // do children
43. if (xml.hasChildNodes()) {
44. for (var i = 0; i < xml.childNodes.length; i++) {
45. var item = xml.childNodes.item(i);
46. var nodeName = item.nodeName;
47. if (typeof(obj[nodeName]) == "undefined") {
48. obj[nodeName] = xml2Json(item);
49. } else {
50. if (typeof(obj[nodeName].length) == "undefined") {
51. var old = obj[nodeName];
52. obj[nodeName] = [];
53. obj[nodeName].push(old);
54. }
55. obj[nodeName].push ? obj[nodeName].push(xml2Json(item)) : obj[nodeName] = xml2Json(item);
56. }
57. }
58. }
59. return obj;
60. };
62. return {
63. str2xml: str2xml,
64. xml2Json: xml2Json,
65. }
66. })();