Javascript 使用Greasemonkey获取选择表内容_Javascript_Html_Greasemonkey

Javascript 使用Greasemonkey获取选择表内容

javascript html

Javascript 使用Greasemonkey获取选择表内容,javascript,html,greasemonkey,Javascript,Html,Greasemonkey,我正在尝试使用Greasemonkey脚本从站点检索表的内容。以下是此表的外观： <table class="OCalaisBox"> <tr class="OCalaisHeadRow"> <td colspan="4" class="OCalaisTitleBar">Topics in this article</td> </tr> <tr> <td class="OCalaisList inde

我正在尝试使用Greasemonkey脚本从站点检索表的内容。以下是此表的外观：

<table class="OCalaisBox">
<tr class="OCalaisHeadRow">
    <td colspan="4" class="OCalaisTitleBar">Topics in this article</td>
</tr>
<tr>
    <td class="OCalaisList indexNormalText">
        <div class="OCalaisHeader">Country</div>
        <ul>
            <li><a href="/category/country/nigeria">Nigeria</a></li>
            <li><a href="/category/country/bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
        </ul>
    </td>
</tr>
</table>

比如说，我想找回尼日利亚和波斯尼亚－黑塞哥维那

编者按：

您可以通过CSS选择器找到所有要查找的元素。在这种情况下，以下oneliner将完成此工作：

array = ( [].map.call(document.querySelectorAll('.OCalaisList>ul>li>a'), function(item) { return item.textContent; }));

// output the array to console (press ctrl+shift+k in Firefox)
console.log(array);

map是Array.prototype的一种方法。querySelectorAll方法返回的结果是可迭代的，但实际上不是一个数组，并且本身没有此方法。若您将map和call方法放在上下文中，它将作为结果的一个方法工作

querySelectorAll返回指定的所有CSS选择器匹配项的节点列表

map对输入数组的每个元素调用回调函数。回调返回一个新值，映射返回所有新值的新数组

测试用例：

<!DOCTYPE html>
<html>
  <head>
    <title>find contents test case</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <table class="OCalaisBox" cellpadding="0" cellspacing="0">
      <tr class="OCalaisHeadRow">
        <td colspan="4" class="OCalaisTitleBar">Topics in this article</td>
      </tr>
      <tr>
        <td class="OCalaisList indexNormalText" valign=top width="25%" >
          <div class="OCalaisHeader">Country</div>
          <ul >
            <li><a href="/category/country/nigeria">Nigeria</a></li>
            <li><a href="/category/country/bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
          </ul>
        </td>
      </tr>
    </table>
  </body>

  <script>
    array = ( [].map.call(document.querySelectorAll('.OCalaisList>ul>li>a'), function(item) { return item.textContent; }));
    console.log(array);
  </script>
</html>

由于您希望在本文中列出国家，因此最简单的方法是关闭提供的链接HREF。“其他答案”方法将适用于您的示例HTML，但会获取大量其他内容

最简单的可读代码：

//--- Get the country links:
var cntryLinks  = document.querySelectorAll ("a[href^='/category/country/']");
//--- Extract the country names:
var nameList    = [].map.call (cntryLinks, function (cLink) {
    return cLink.textContent; 
} );
//--- Convert to text:
var countryStr  = nameList.join (", ");

//--- Display:
console.log ("Countries: " + countryStr);
alert ("Countries: " + countryStr);

请记住，该网站只在大多数新闻文章上发布这些信息，而不是所有页面。

谢谢您的回复。所以我试了一下oneliner，它给了我一个空列表；我做错了什么？我不知道你使用的完整代码。我已经添加了在Firefox中运行的完整测试用例。您可以尝试限制较少的选择器“.OCalaisList li a”。我刚刚将.innerHTML改为.textContent。因此，当内容是：波斯尼亚和黑塞哥维那，哪个更适合这个案例时，你会得到波黑和赫尔泽戈维纳。您需要的是未格式化的内容，而不是HTML。通过这种方式，您还可以选择孔标记并获取其内容，无论是否有超链接和格式代码。您的代码大致正确，但不可靠。它将失火。它看起来像是在半岛电视台的网页上，很多东西都使用这种结构——在使用它的网页上。假设不需要更多的tahn国家，问题中没有提到的是，XPath表达式也可以在不依赖hyperref位置的情况下完成任务。nameList=GM_xpath{path://div[@class='OCalaisHeader'和text='Country']/以下同级：：ul/li，all:true}.mapfunctionitem{return item.textContent；}；这意味着列表项必须跟在div.OCaliasHeader后面，content==Country。对于您链接的站点，还可以另外指定更严格的table.OCalaisBox。