如何从网页复制特定元素

我的目标是从网页中获取特定的文本区域。想象一下，就好像您可以在页面上的任意位置绘制一个矩形，并且该矩形中的所有内容都将复制到剪贴板中。为此，我正在使用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查询，只返回这个数字，但没有运气。我曾经是：

按照此处的建议将整个查询包装到string()中 Xpath - 仅获取节点内容而不获取其他元素

试图弄清楚这个是如何工作的通过 XPath 和更多内容提取节点之间的文本。

为了能够获得所需的值，我使用了一些 bash-script + 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()")立即获得数字并节省自己的其余步骤？
我对xmlstarlet还是不是很熟悉，尤其是选拔（sel）模式让我发疯。我见过各种组合以下选项：
-c 或 --copy-of - XPATH 表达式的打印副本
-v 或 --value-of - XPATH 表达式的打印值
-o 或 --output - 输出字符串文字
-m 或 --match - match XPATH 表达式

有人可以解释何时使用哪一个吗？如果可能的话，它很高兴看到具体的例子。如果有兴趣，有上述选项的各种组合，我不太了解：http://www.grahl.ch/blog/minutiae-return-content-element-xmlstarlet使用 xmlstarlet 提取和转储元素测试 XML 属性

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选项。

谢谢你的想法。

从我收集的内容来看，您想从标题为"数字"的范围内收集数字，并希望将其作为字符串。

请尝试以下操作：

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。

Firebug 中的 $$("<CSS3 selector>") 和 $x("<XPATH>") 实际上返回了一个真实的数组（不像 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"));

如果你按照威廉·纳蒙塔斯的建议选择$$('span[title="Numbers"]')也是如此。

弗洛伦特

相关内容

最新更新

热门标签：