Javascript 表单使用Xpath修改XML数据

我正在尝试设置一个表单，允许人们使用标准输入/文本区域/复选框等修改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>

函数updateXml（输入）{
newvalue=$（输入）.val（）；
xmlStr=$（“#xml”）.val（）；
如果（xmlStr==“”）返回；
xmlObj=$.parseXML（xmlStr）；
xpath=$（输入）.attr（'data-xpath'）；
result=xmlObj.evaluate（xpath，xmlObj，null，XPathResult.ANY_类型，null）；
element=result.iterateNext（）；
//元素是noden的副本，我不能直接修改它，它不会反映在xmlObj中。。。
//这将在我的示例中起作用，但它太“硬编码”，我想使用xpath来改变这一点
xmlObj.getElementsByTagName（“person”）[0]。getElementsByTagName（“name”）[0]。innerHTML=newvalue；
var xmlText=new XMLSerializer（）.serializeToString（xmlObj）；
$（“#xml”）.val（xmlText）；
}
保罗
12

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

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

---

谢谢

您的基本想法是正确的：使用XML DOM元素操作文档，然后序列化并更新textarea

下面的示例代码仍然不完整，需要经过一些打磨才能投入生产。然而，我认为我已经添加了很多有用的代码，并演示了如何实现它

函数getElementsByXPath（xpath、elt、val） { var结果=[]； 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）； 对于（var i=0；i

保罗
12

@user3594079我首先完全误解了这一点。但我想我现在就知道了。这比预期的要难。嗨。谢谢你的回答，但我仍然不知道如何将函数的结果重新注入xml。@user3594079有趣的是：这只在Chrome中起作用，当我通过另一个文档

文档操作原始xml对象时，它似乎利用了某种缺陷。evaluate

而不是

xmlObj.evaluate

-它不起作用如果我按如下所示进行更正，则会出现以下情况：