表单以使用Xpath修改XML数据

Question

我正在尝试设置一种表单，以允许人们使用标准输入/文本区域/复选框等来修改XML文件的某些部分； 并在其浏览器中查看“实时”修改的相应XML文件（因此使用JS）

到目前为止，我一直在做的事情是在每个表单元素上都有一个属性，该属性存储一个XPath来查看输入对应的XML节点/文本。

我可以从XML中获取xpath值，但是我无法修改相应的XML。

这是代码：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function updateXml(input) {
newvalue = $(input).val();
xmlStr = $("#xml" ).val();
if(xmlStr=="" ) return;
xmlObj = $.parseXML(xmlStr);
xpath = $(input).attr('data-xpath');
result = xmlObj.evaluate(xpath, xmlObj, null, XPathResult.ANY_TYPE, null);
element = result.iterateNext();
  //element is a copy of the noden I can't modify it directly, it won't be reflected in xmlObj...

  //this will work in my example, but it's too "hardcoded", I want to change that using xpath

xmlObj.getElementsByTagName("person" )[0].getElementsByTagName("name" )[0].innerHTML = newvalue;
var xmlText = new XMLSerializer().serializeToString(xmlObj);
$("#xml" ).val(xmlText);
}
</script>
<form>
<input onkeyup="updateXml(this);" data-xpath="/person/name" />
<textarea id="xml" style="width: 800px;height: 600px;">
<?xml version="1.0" encoding="ISO-8859-1"?>
<person>
  <name>Paul</name>
  <age>12</age>
</person>
</textarea>
</form>

换句话说，我希望能够使用另一个输入字段来更改“年龄”，而无需更改代码...

知道我该怎么做吗？ 还是另一种（简单的）方法呢？

谢谢 ！

Answer 1

您的基本想法是正确的：使用XML DOM元素处理文档，然后重新序列化并更新文本区域。

下面的示例代码仍然不完整，需要进行一些改进才能投入生产。 但是，我想我已经添加了很多有用的代码并演示了如何完成！

 function getElementsByXPath(xpath, elt, val) { var results = []; var nsResolver = document.createNSResolver( elt.ownerDocument == null ? elt.documentElement : elt.ownerDocument.documentElement ); var xPathRes = document.evaluate(xpath, elt, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < xPathRes.snapshotLength; i++) { var element = xPathRes.snapshotItem (i); if (element instanceof Attr) { results.push(val); }//element.nodeValue); else if (element instanceof Element && element.outerHTML) { element.innerHTML = val; results.push(element.outerHTML);} else results.push(element); //TODO } return results; } function updateXml(input) { newvalue = $(input).val(); xmlStr = $("#xml" ).val(); if(xmlStr=="" ) return; var xml = (new DOMParser()).parseFromString(xmlStr, "text/xml"); var xpath = $(input).attr('data-xpath'); var results = getElementsByXPath(xpath, xml, newvalue); /*var ResultTxt = ''; results.forEach(function(result) { ResultTxt += result + "\\n"; }); $("#result" ).val(ResultTxt); console.log(ResultTxt);*/ var xmlText = new XMLSerializer().serializeToString(xml); $("#xml" ).val(xmlText); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <form> <input onkeyup="updateXml(this);" data-xpath="/person/name" /> <textarea id="xml" style="width: 800px;height: 200px;"> <?xml version="1.0" encoding="ISO-8859-1"?> <person> <name>Paul</name> <age>12</age> </person> </textarea> </form> </body> </html>