使用JavaScript startsWith()实现XML搜索未得预期结果，原因何在？

嘿，我看你遇到的问题挺典型的——明明输入的内容应该和XML里的药品名称匹配，但startsWith()却一直返回false，对吧？我帮你捋捋问题出在哪，以及怎么解决。

问题根源 #

仔细看你的XML文件，<medicinename>标签里的内容前后都带有空格，比如：

<medicinename> Sulpitac 50mg </medicinename>

这里的文本实际是" Sulpitac 50mg "（注意前后的空白字符），而用户在文本框输入的应该是类似"Sulpitac"这样没有前后空格的内容。这时候直接用nodename.startsWith(medname)自然匹配不上，因为nodename的第一个字符是空格，不是你输入的字母S。

解决方案 #

我们只需要在获取XML节点文本和用户输入内容时，先去掉前后的空白字符，用JavaScript的trim()方法就能搞定。另外，建议把同步的XMLHttpRequest改成异步的，同步请求会阻塞页面，影响用户体验。

修改后的完整代码如下：

function addMedicineNames() {
  var rawFile = new XMLHttpRequest();
  var file = "medicines.xml";
  // 改成异步请求，第三个参数设为true
  rawFile.open("GET", file, true);
  
  rawFile.onreadystatechange = function () {
    if (rawFile.readyState === 4) {
      if (rawFile.status === 200 || rawFile.status == 0) {
        var allXml = rawFile.responseXML;
        var nodes = allXml.getElementsByTagName("medicinename");
        // 处理用户输入：去掉前后空白
        var medname = document.getElementById("medtextbox").value.toString().trim();
        
        for (var nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
          // 处理XML节点文本：去掉前后空白
          var nodename = nodes[nodeIndex].childNodes[0].nodeValue.toString().trim();
          
          if (nodename.startsWith(medname)) {
            alert("true");
          } else {
            alert("false");
          }
        }
      }
    }
  }
  rawFile.send(null);
}

额外说明 #

1. trim()方法会移除字符串开头和结尾的所有空白字符（包括空格、制表符、换行符等），确保我们对比的是干净的文本内容。
2. 把XML请求改成异步后，页面不会在等待XML加载时卡住，用户体验会更流畅。

内容的提问来源于stack exchange，提问作者Deepeshkumar