Javascript XPath href console.log 对象属性输出

Question

嘿，我正在寻找使用 Xpath 从一些 html 获得 href link所以：

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

Answer 1

我看到了问题。开发人员控制台正在记录 Attribute 个对象。你需要想办法把属性变成字符串，像这样：

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

您可能还想做：

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

Answer 2

每个 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; }

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

Javascript XPath href console.log 对象属性输出

Javascript XPath href console.log object Attr output

javascript

xpath

element

nodes