Javascript XPath href console.log 对象 Attr 输出答案

【问题标题】：Javascript XPath href console.log object Attr outputJavascript XPath href console.log 对象 Attr 输出
【发布时间】：2022-01-13 23:23:55
【问题描述】：

大家好，我希望使用 Xpath 从一些 html 中获取 href 链接，如下所示：

function getStuff(Path) {
  var txt = '';
  var cnt = 0;
  var nodes = document.evaluate(Path, document, null, XPathResult.ANY_TYPE, null);
  var result = nodes.iterateNext();
  var Json = '{testing:[';
  while (result) {
    if (cnt != 10) {
      //console.log('Result: ', result);
      txt += '{href:' + result + '},';
      result = nodes.iterateNext();
      cnt++;
    } else {
      txt = txt.replace(/(^,)|(,$)/g, );
      break;
    }
  }
  return Json + txt + ']}';
}
console.log(getStuff("//html/body/div[1]/div/div/div/div/div/div/div/descendant::a[contains(@href, '?fref=pb')]/@href"));

输出如下：

{testing:[{href:[object Attr]},{href:[object Attr]},{href:[object A...etc etc

但是，如果我取消注释 console.log，它会像我需要的那样输出：

Result:  href="/bob.barker.982?fref=pb"
Result:  href="/bill.gates.982?fref=pb"
Result:  href="/steve.jobs?fref=pb"
Result:  href="/513845713656?fref=pb"
Result:  href="/bill.murry?fref=pb"
Result:  href="/m.c.hammer?fref=pb"
...etc etc

如何获得与console.log 相同但保存到txt+= 逻辑的输出？如果有更好的方法，请分享。

这里是JSfiddle Demo

【问题讨论】：

标签： javascript xpath nodes element

【解决方案1】：

每个result 都是一个Attr，所以你应该使用result.value

您还可以通过构建一个真实数组和stringifying 结果来简化此操作。从不构建您自己的 JSON 字符串

function getStuff(path) {
  const nodes = document.evaluate(path, document, null, XPathResult.ANY_TYPE, null);
  const result = {
    testing: []
  }
  
  let i = 0
  let attr = nodes.iterateNext()
  while (i++ < 10 && attr) {
    result.testing.push({ href: attr.value })
    attr = nodes.iterateNext()
  }

  // remove the last 2 args if you don't want formatting
  return JSON.stringify(result, null, 2) 
}
console.log(getStuff("//html/body/div[1]/div/div/div/div/div/div/div/descendant::a[contains(@href, '?fref=pb')]/@href"));

.as-console-wrapper { max-height: 100% !important; }

&lt;div id="main"&gt; &lt;div class="a" style="min-height: 480px;"&gt; &lt;div class="72"&gt; &lt;div class="4"&gt; &lt;div class="5"&gt; &lt;div&gt; &lt;div class="o"&gt; &lt;div&gt; &lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/bob.barker.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/bob.barker.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;bob barker&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/bill.gates.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/bill.gates.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;bill gates&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/steve.jobs.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/steve.jobs.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;steve jobs&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/513845713656.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/513845713656.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;513845713656&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/bill.murrey.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/bill.murrey.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;bill murrey&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="qr"&gt; &lt;div class="item"&gt; &lt;div class="ib"&gt; &lt;a class="l" href="/m.c.hammer.982?fref=pb"&gt;&lt;/a&gt; &lt;div class="n"&gt; &lt;a href="/m.c.hammer.982?fref=pb"&gt; &lt;div class="t5"&gt; &lt;span&gt; &lt;span&gt; &lt;strong&gt;m.c.hammer&lt;/strong&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;div class="p"&gt; &lt;div class="0" id="u0c"&gt; &lt;div class="9" style="display: none;"&gt;something here&lt;/div&gt;&lt;div style="display: none;" class="notice"&gt;something here&lt;/div&gt;&lt;div class="notice ellipsis"&gt;&lt;/div&gt;&lt;div style="display: none;" class="nce"&gt;something here&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="4m" id="u0F"&gt; &lt;a href="/link/here/4jjk5rtgjrtujyerth" class="g"&gt; &lt;i class="gQ"&gt; &lt;u&gt;someething here&lt;/u&gt; &lt;/i&gt; &lt;span class="_55sr"&gt;something here&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="outcome" style="font-size: 30px; font-weight: bold;"&gt;Open Dev Tools &gt; console for output&lt;/div&gt;

【讨论】：

很好的例子@Phil。那行得通。谢谢！

【解决方案2】：

我看到了问题。开发者控制台正在记录 Attribute 对象。您需要找到一种方法将属性转换为字符串，如下所示：

txt += '{href:' + result.value + '},';

您可能还想这样做：

txt += '{href: \"' + result.value + '\"},';

【讨论】：