我正在尝试设置一个表单，以允许人们使用标准输入/文本区域/复选框等修改 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>
换句话说，我希望能够使用另一个输入字段更改“年龄”，而不更改代码......
知道我该怎么做吗？或者另一种(简单的)方法？
谢谢!
最佳答案
您的基本想法是正确的:使用 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>关于javascript - 使用 Xpath 修改 XML 数据的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51314432/