表单以使用Xpath修改XML数据
[英]form to modify XML data using Xpath
问题描述
I'm trying to setup a form to allow people modifying some parts of XML files, using standard inputs/textareas/checkboxes, etc; 
我正在尝试设置一种表单，以允许人们使用标准输入/文本区域/复选框等来修改XML文件的某些部分； and see the corresponding XML file modified in "real time", in their browser (so using JS) 并在其浏览器中查看“实时”修改的相应XML文件（因此使用JS）
What I have been doing so far is have an attribute on each form element that stores an XPath to see which XML node/text the input corresponds to. 到目前为止，我一直在做的事情是在每个表单元素上都有一个属性，该属性存储一个XPath来查看输入对应的XML节点/文本。
I can get the xpath value from the XML, but them I'm unable to modify the corresponding XML. 我可以从XML中获取xpath值，但是我无法修改相应的XML。
Here is the code : 这是代码：
<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>
In other words, I would like to be able to change the "age" using another input field, without changing the code... 换句话说，我希望能够使用另一个输入字段来更改“年龄”，而无需更改代码...
Any idea how I can do this ? 知道我该怎么做吗？ or another (simple) way of doing it ? 还是另一种（简单的）方法呢？
Thanks ! 谢谢 ！
1 个解决方案
解决方案1
0 2018-07-13 02:12:01
Your basic idea is correct: manipulate the document using the XML DOM elements, then serialize back and update the textarea. 您的基本想法是正确的：使用XML DOM元素处理文档，然后重新序列化并更新文本区域。
The sample code below is still incomplete and needs some polishment before it can go to production. 下面的示例代码仍然不完整，需要进行一些改进才能投入生产。 However, I think I have added a lot of useful code and demonstrated how it can be done! 但是，我想我已经添加了很多有用的代码并演示了如何完成！
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.