Javascript 使用 document.evaluate 从 XPath 获取 xlink:href

Question

嘿，我在试图弄清楚为什么我下面的XPath代码无法在我的文档中找到图像标签和与之相关的HREF 链接时遇到了最糟糕的情况。

XPath （完整）如下所示：

//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/后代::image[starts-with(@href,'https://')]

我使用的 javascript 代码是：

function checking(Path) {
   const nodes = document.evaluate(Path, document, null, XPathResult.ANY_TYPE, null);
   const result = {
       Data: []
   };
   let attr = nodes.iterateNext();
   result.Data.push({ href: attr});
   return JSON.stringify(result);
}
console.log(checking("//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/descendant::image[starts-with(@href,'https://')]"));

还有我正在查看的HTML以获得所述图像Xlink:HREF ：

<body class="">
  <div id="" style="">
    <div>
      <div class="">
        <div class="">
          <div class="">
            <div class="">
              <div class="">
                <div class="">
                  <div class="">
                    <div class="">
                      <div class="" role="5ma">
                        <div class="">
                          <div class="">
                            <div class="">
                              <div>
                                <div class="">
                                  <div class="">
                                    <div class="">
                                      <a aria-label="" class="" href="https://www.this.com/link/is/not/needed" tabindex="0">
                                        <div class="">
                                          <svg aria-label="" class="" data-visualcompletion="ignore-dynamic" role="img" style="height: 168px; width: 168px;">
                                            <g mask="url(#)">
                                              <image x="0" y="0" height="100%" width="100%" xlink:href="https://www.google.com/logos/doodles/2021/seasonal-holidays-2021-6753651837109324-6752733080595603-cst.gif" style="height: 168px; width: 168px;"></image>
                                              <circle class="" cx="8" cy="4" r="4"></circle>
                                            </g>
                                          </svg>
                                        </div>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

由于某种原因，我不断为output获得NULL ？ 这是一个jsfiddle来直观地测试它。

{
  "Data": [
    {
      "href": null
    }
  ]
}

有人知道我为什么会这样吗？

Answer 1

一些东西：

首先，您在命名空间和Deprecated XLink URL 参考属性方面存在问题。

二、在

result.Data.push({
    href: attr
  });

您应该push属性的节点值：

result.Data.push({
    href: attr.nodeValue
  });

最后，由于命名空间问题，为了简化 xpath 表达式，将你的comeback改为

var comeback = checking("//*[local-name()='image'][starts-with(./@href,'https://')]/@href");

它应该像这个小提琴一样工作。

Answer 2

使用 xlink:href 选择器替代@Jack Fleeting 答案（例如，跳过所有这些 div）：

string(//*[name() = 'svg']/*[name()='g']//*[name()='image' and starts-with(@*[name()='xlink:href'],'https://')]/@*[name()='xlink:href'])

这将只提取属性值作为字符串（第一次出现）

Javascript 使用 document.evaluate 从 XPath 获取 xlink:href

问题描述

2 个解决方案

解决方案1
0 2021-12-11 21:37:32

解决方案2
0 2021-12-11 22:20:12

Javascript 使用 document.evaluate 从 XPath 获取 xlink:href

问题描述

2 个解决方案

解决方案1 0 2021-12-11 21:37:32

解决方案2 0 2021-12-11 22:20:12

解决方案1
0 2021-12-11 21:37:32

解决方案2
0 2021-12-11 22:20:12