如何从XSLT文件而非XML文件调用缩写定义？

问题原因 #

当前代码错误启用了enableDisableOutputEscaping参数，将XSLT根元素的文本内容重新解析为XML，导致无法定位到<acronym>标签；同时直接使用querySelectorAll("acronym")无法穿透XSLT的命名空间模板结构，找不到目标元素。

解决方案 #

1. 关闭不必要的enableDisableOutputEscaping参数，直接解析XSLT原文件为XML文档。
2. 使用XPath结合命名空间，定位到<xsl:template>内部的<acronym>元素。

修改后的代码 #

HTML中的JavaScript部分修改 #

class Acronym {
  constructor() {
    this.getXHR.bind(this)(
      "GET",
      "acronyms2.xslt",
      (err, data) => {
        if (err) {
          console.error(err);
          return;
        }
        // 使用XPath查询xsl:template内的acronym元素
        const xpathResult = data.evaluate(
          "//xsl:template//acronym",
          data,
          (prefix) => {
            if (prefix === "xsl") return "http://www.w3.org/1999/XSL/Transform";
            return null;
          },
          XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
          null
        );
        const acronyms = [];
        for (let i = 0; i < xpathResult.snapshotLength; i++) {
          acronyms.push(xpathResult.snapshotItem(i));
        }
        this.acronymMap = new Map(
          Array.from(acronyms).map((acronym) => [
            acronym.getAttribute("id"),
            acronym.textContent,
          ])
        );
        this.deploy();
      },
      false // 关闭enableDisableOutputEscaping
    );
  }

  getXHR(method, url, callback, enableDisableOutputEscaping = false) {
    console.log("getXHR", method, url);
    let x = new XMLHttpRequest();
    x.open(method, url);

    x.onload = () => {
        console.log("onload", x.status);
      if (x.status == 404) return callback("File not found");
      let p = new DOMParser();
      let data = p.parseFromString(x.response, "application/xml");
      // 移除错误的CDATA解析逻辑
      callback(null, data);
    };

    x.onerror = () => {
        console.log("onerror", x.status);
      callback(x.response);
    };
    x.responseType = "document";
   
    x.send();
  }

  deploy() {
    console.log("deploy");
    let acr = document.querySelectorAll("span.def");

    for (let a of acr) {
      a.classList.add("expose");
      a.addEventListener("mouseover", this.update.bind(this, a));
    }
  }

  update(e) {
    console.log("update", e);
    let v = this.acronymMap.get(e.dataset.acronym.toUpperCase()) || "No Acronym Found";
    e.setAttribute("data-content", v);
  }
}

const a = new Acronym();

说明 #

• 移除了getXHR中错误的CDATA解析逻辑，直接用DOMParser解析XSLT文件为XML文档。
• 通过XPath查询指定命名空间下的<xsl:template>元素，提取其内部所有<acronym>标签，确保正确获取缩写定义。
• 保留原有映射逻辑和悬停事件处理，保证功能正常运行。

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