如何使用 Regex 和 javascript 进行过滤？答案

【问题标题】：How to filter using Regex and javascript?如何使用 Regex 和 javascript 进行过滤？
【发布时间】：2009-05-25 14:28:06
【问题描述】：

我的页面中的某个元素中有一些文本，我想取消该页面上的价格，旁边没有任何文本。

我发现页面包含这样的价格：

<span class="discount">now $39.99</span>

如何过滤这个并仅使用 JavaScript 和正则表达式获得“$39.99”。

这个问题可能太简单了，或者以前用其他方式问过，但我对正则表达式一无所知，所以请你帮忙:)。

【问题讨论】：

标签： javascript html regex

【解决方案1】：

<script language="javascript">
window.onload = function () {

    // Get all of the elements with class name "discount"
    var elements = document.getElementsByClassName('discount');

    // Loop over each <span class="discount">
    for (var i=0; i < elements.length; i++) {

         // get the text, e.g. "now $39.99"
         var rawText = elements[i].innerHTML;

         // Here's a regular expression to match one or more digits (\d+)
         // followed by a period (\.) and one or more digits again (\d+)
         var priceAsString = rawText.match(/\d+\.\d+/)

         // You'll want to make the price a floating point number if you 
         // intend to do any calculations with it.
         var price = parseFloat(priceAsString); 

         // Now what do you want to do with the price? I'll just write it out
         // to the console (using FireBug or something similar)
         console.log(price);

    }
}
</script>

【讨论】：

仅仅因为你命名变量 spans 并不意味着你只匹配 spans...
是的...，但您只更正了变量名。它仍然匹配非跨度！
OP 说“我的页面中的元素中有一些文本” - 它并没有说它只是在跨度中。
他说，它包含一个“这样的价格”，这显然是一个“跨度”。
这显然也是一个“例子”。你不知道所有的出现都出现在 spans 中。

【解决方案2】：

document.evaluate("//span[@class='discount']", 
  document, 
  null, 
  XPathResult.ANY_UNORDERED_NODE_TYPE, 
  null).singleNodeValue.textContent.replace("now $", "");

编辑：这是标准的XPath。我不确定你在寻求什么样的解释。对于过时的浏览器，您将需要像 Sarissa 和/或 Java-line 这样的第三方库。

【讨论】：

你不认为一些解释会有所帮助吗？这是什么？使用它有什么要求？
我对 XPath 只是模糊熟悉，但这里有一个粗略的解释： // 表示我们要匹配树中以下标记的任何实例（而不是具有特定父标记的实例） , span 是要匹配的标签，[] 之间的东西是附加约束，在这种情况下属性类必须是折扣。

【解决方案3】：

正则表达式根本不擅长解析 HTML（请参阅 Can you provide some examples of why it is hard to parse XML and HTML with a regex? 了解原因）。您需要的是一个 HTML 解析器。有关使用各种解析器的示例，请参阅 Can you provide an example of parsing HTML with your favorite parser?。

Patrick McElhaney 和 Matthew Flaschen 的回答都是解决问题的好方法。

【讨论】：

问题询问如何使用正则表达式和javascript进行过滤。您将利用 javascript 的 DOM 函数，然后使用正则表达式。浏览器是您需要的 HTML 解析器。绝对不需要为此使用新的解析库。
@nickf 正如你所说，浏览器是一个解析器。看看页面上的例子，至少有两个是使用浏览器作为解析器的。

【解决方案4】：

作为Matthew Flaschen suggested，如果您对目标文档的节点结构有所了解（并且由于您提供了一个示例，您似乎知道），那么 XPATH 是一种更好的方法。如果您不知道节点结构，正则表达式仍然无法解析 XML。

更多资源可以帮助您入门：

XPath in Javascript: Introduction
DOM Parsing With XPath and JavaScript
Mozilla 开发中心：Introduction to using XPath in JavaScript

我还发现 DOM Inspector 和 XPather 的 FireFox 扩展组合是在给定页面上派生和测试 XPath 表达式的宝贵工具。（如果您使用的是其他浏览器——好吧，我不知道）。

【讨论】：