如何使用正则表达式和JavaScript进行过滤？

Question

I have some text in an element in my page, and i want to scrap the price on that page without any text beside.

I found the page contain price like that:

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

How to filter this and just get "$39.99" just using JavaScript and regular expressions.

The question may be too easy or asked by another way before but i know nothing about regular expressions so asked for your help :).

Answer 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>

Answer 2

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

EDIT: This is standard XPath . I'm not sure what kind of explanation you're seeking. For outdated browsers, you will need a third-party library like Sarissa and/or Java-line .

Answer 3

Regexes are fundamentally bad at parsing HTML (see Can you provide some examples of why it is hard to parse XML and HTML with a regex? for why). What you need is an HTML parser. See Can you provide an example of parsing HTML with your favorite parser? for examples using a variety of parsers.

Patrick McElhaney's and Matthew Flaschen's answers are both good ways to solve the problem.

Answer 4

as Matthew Flaschen suggested , XPATH is a better way to go, if you know something about the node structure of the target document (and since you provided an example, you seem to). If you don't know the node structure, regexes are still lousy for parsing XML.

some more resources to kick-start you:

• XPath in Javascript: Introduction
• DOM Parsing With XPath and JavaScript
• Mozilla dev-center: Introduction to using XPath in JavaScript

I've also found the FireFox extension combo of DOM Inspector and XPather to be an invaluable tool for deriving and testing XPath expressions on a given page. (If you're using another browser -- well, I don't know).