Question

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

到目前为止，我一直在做的事情是在每个存储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>

表格以使用Xpath

1 个答案: