尝试在页面上查找与某个正则表达式匹配的所有元素

Question

I am working on a javascript bookmarklet that will go through and find all elements on a webpage with text that looks like a currency. Then with each element, I find its font size and determine whether it has a line-through. The price and font-size are pushed into an array.

I have put together the code below but I am not sure if it is the most efficient. There is also an error with the match. Ideally, I would like to be able to hone in straight on those elements that match with the regex.

var ele = b.getElementsByTagName('*');
for(i=0; i<ele.length; i++) {
    //check iff innerhtml matches
    if(ele[i].innerHTML.match(/[$€£]\d{1,3}(,?\d{3})?(\.\d{2})?/g)) {
        var price = ele[i].innerHTML;
        var size = ele[i].style.fontSize;
        var lineThrough = ele[i].style.textDecoration;
        if(lineThrough != 'line-through' && price && size) {
            results.push({ size: size, price: price});
        }
    }
}

For some reason, the match seems to not match exactly.

Answer 1

First of all if you would like to match a sums grater than 999,999.99, regexp should be: [$€£](\\d{1,3})(,?\\d{3})*(\\.\\d{2})? . Here I changed ? to * that means "0 or more", when "?" means "zero or one".

If you want to find a price that is not written in a strict format (eg $30 000 000), than you may want to add admission for "possibly" spaces: [$€£]\\s*(\\d{1,3})\\s*(,?\\d{3}\\s*)*(\\.\\d{2})? .

Object style contains only the styles specified directly for this element, but does not contains inherited styles. To get access to inherited styles, use window.getComputedStyle .

innerHTML property returns content of all nested nodes, so your function will find all parent elements of element you looking for. To find the current node text I use firstChild property if this property is instance of Text (but I'm believe there's a more elegant solution):

var ele = document.getElementsByTagName('*');
results = [];

for (i = 0; i < ele.length; i++)
{
    var el = ele[i];
    if (el.hasChildNodes && el.firstChild instanceof Text)
    {
        var price = el.firstChild.textContent.match(/([$€£]+)\s*(\d{1,3})\s*(,?\d{3}\s*)*(\.\d{2})?/g);
        if (price)
        {
            var style = window.getComputedStyle ? window.getComputedStyle(el) : el.style;
            var size = style.fontSize;
            var lineThrough = style.textDecoration;
            if (lineThrough != 'line-through' && price && size)
            {
                results.push({ size: size, price: price});
            }
        }
    }
}

If you want to find amounts that contains abbreviations, you can expand your regex to: /([$€£]+)\\s*(\\d{1,3})\\s*(,?\\d{3}\\s*)*(\\.\\d{2})?(\\s*[K|M|MM|B|thousand|million|billion])*/g .