如何从网页复制特定元素答案

【问题标题】：How to copy particular elements from web page如何从网页复制特定元素
【发布时间】：2013-10-30 06:09:53
【问题描述】：

我的目标是从网页中获取特定的文本区域。想象一下，如果您能够在页面上的任何位置绘制一个矩形，并且该矩形中的所有内容都将被复制到剪贴板中。为此，我正在使用 FireBug（请随意提出其他解决方案，我已经搜索了插件或书签，但没有找到任何有用的东西）和它的控制台窗口和 XPath。我想要获取的值采用以下格式（这是从 FireBug“HTML 检查”中观察到的）：

<span class="number3_0" title="Numbers">3.00</span>

所以我最终得到以下代码，我从 FireBug 控制台发出： $x("//span[@title='Numbers']/text()")

在这之后我得到这样的东西：

[<TextNode textContent="2.00">, <TextNode textContent="2.00">, <TextNode textContent="2.00">, <TextNode textContent="2.00">, <TextNode textContent="3.00">]

在此之后，我单击（用鼠标右键）[ 并选择 Inspect in DOM panel，然后按 ctrl+a 并按以下格式复制/粘贴数据：

0   <TextNode textContent="2.00">
1   <TextNode textContent="2.00">
2   <TextNode textContent="2.00">
3   <TextNode textContent="2.00">
4   <TextNode textContent="3.00">

您可以假设textContent 的值是我感兴趣的信息。我尝试修改原始XPath 查询以仅返回这些数字但没有运气。我是：

按照Xpath - get only node content without other elements 的建议将整个查询包装到string() 中

试图弄清楚这个是如何工作的 Extracting text in between nodes through XPath 等等。

为了能够获得所需的值，我使用了一些 bash 脚本 + xml 格式，在完成这个乏味/容易出错的任务之后，我得到了以下格式：

<?xml version="1.0"?>
<head>
  <TextNode textContent="2.00"/>
  <TextNode textContent="2.00"/>
  <TextNode textContent="2.00"/>
  <TextNode textContent="2.00"/>
  <TextNode textContent="3.00"/>
  <TextNode textContent="3.00"/>
</head>

现在我使用xmlstarlet 来获取这些值（是的，我知道我可以在上一步中使用正则表达式并拥有我需要的所有数据。但我对 DOM/XPath 解析很感兴趣并试图弄清楚它是如何工作）以下列方式：

cat input | xmlstarlet sel -t -m "//TextNode" -v 'concat(@textContent," 
")'

这最终给了我想要的输出：

2.00
2.00
2.00
2.00
3.00

我的问题有点笼统：

如何将这个可怕的漫长过程自动化？
如何修改 FireBug 中使用的原始 XPath 字符串 $x("//span[@title='Numbers']/text()") 立即获取数字并节省自己的其余步骤？
我对@987654341@还是不是很熟悉，尤其是选择 (sel) 模式让我发疯。我见过各种组合以下选项：

-c 或 --copy-of - 打印 XPATH 表达式的副本

-v 或 --value-of - 打印 XPATH 表达式的值

-o 或 --output - 输出字符串文字

-m 或 --match - 匹配 XPATH 表达式

谁能解释一下什么时候用哪一个？如果可能的话，很高兴看到具体的例子。如果感兴趣，有提到的选项的各种组合，我不太了解： http://www.grahl.ch/blog/minutiae-return-content-element-xmlstarlet Extracting and dumping elements using xmlstarlet Testing for an XML attribute

4.) 关于xmlstarlet 的最后一个问题是一个装饰性的语法糖，如何获得漂亮的换行符分隔输出，如您所见，我通过添加换行符作为分隔符“作弊”，但是当我尝试使用转义字符时像这样：

cat input | xmlstarlet sel -t -m "//TextNode" -v 'concat(@textContent,"\n")'

它没有用，我从中学到很多东西的原始参考也以这种“丑陋”的方式使用它http://www.ibm.com/developerworks/library/x-starlet/index.html

PS：也许这些所有步骤都可以使用 curl + xmlstarlet 来简化，但对于需要登录或其他类似内容的页面也可以使用 FireBug 选项。

感谢所有的想法。

【问题讨论】：

标签： xpath firebug element webpage xmlstarlet

【解决方案1】：

$$("<CSS3 selector>") 和 $x("<XPATH>") 在 Firebug 中实际上返回一个真正的数组（不像 document.querySelectorAll() 或 document.evaluate 的结果）。所以他们更方便。

使用 Firefox + Firebug：

var numbersNode = $x("//span[@title='Numbers']/text()");
var numbersText = numbersNode.map(function(numberNode) {
    return numberNode.textContent;
}).join("\n");
// Special command of Firebug to copy text into clipboard:
copy(numbersText);

您甚至可以使用 EcmaScript 6 的箭头函数以紧凑的方式进行操作：

copy($x("//span[@title='Numbers']/text()").map(x => x.textContent).join("\n"));

如果您按照 William Narmontas 的建议选择 $$('span[title="Numbers"]')，则相同。

弗洛伦特

【讨论】：

【解决方案2】：

据我所知，您想从标题为“数字”的跨度中收集数字并将其作为字符串。

尝试以下方法：

var numberNodes = document.querySelectorAll('span[title="Numbers"]')
function giveText(me) { return me.textContent; }
Array.prototype.map.call(numberNodes, giveText).join("\n");

第一行使用文档中的 CSS 查询选择器选择所有节点（这意味着您不需要 XPath）。第二行创建一个返回节点文本内容的函数。第三行使用giveText 函数映射numberNodes 列表中的元素，生成一个数字数组，最后用换行符将它们连接起来。

在这之后你可能不需要这个 xmlstarlet。

【讨论】：