How to search DOM to count the number of $ symbol found on a product page?

Question

I am looking to find the best possible way to find how many $ symbols are on a page. Is there a better method than reading document.body.innerHTML and calc how many $-as are on that?

Answer 1

Your question can be split into two parts:

1. How can we get the the webpage text content without HTML tags?

We can generalize the second question a bit.

2. How can we find the number of string occurrences in another string?

And the 'best possible way to do this':

Amaan got the idea right of finding the text, but lets take it further.

var text = document.body.innerText || document.body.textContent;

Adding textContent to the code helps us cover more browsers, since innerText is not supported by all of them.

The second part is a bit trickier. It all depends on the number of '$' symbol occurrences on the page.

For example, if we know for sure, that there is at least one occurrence of the symbol on the page we would use this code:

text.match(/\$/g).length;

Which performs a global regular expression match on the given string and counts the length of the returned array. It's pretty fast and concise.

On the other hand, if we're not sure if the symbol appears on the page at least once, we should modify the code to look like this:

if (match = text.match(/\$/g)) {
  match.length;
}

This just checks the value returned by the match function and if it's null, does nothing.

I would recommend using the third option only when there is a large occurrence of the symbols in the page or you're going to perform the search many many times. This is a custom function (taken from here) to count the occurrence of the specified string in another string. It performs better than the other two, but is longer and harder to understand.

var occurrences = function(string, subString, allowOverlapping) {
  string += "";
  subString += "";
  if (subString.length <= 0) return string.length + 1;
  var n = 0,
      pos = 0;
  var step = (allowOverlapping) ? (1) : (subString.length);
  while (true) {
    pos = string.indexOf(subString, pos);
    if (pos >= 0) {
      n++;
      pos += step;
    } else break;
  }
  return (n);
};

occurrences(text, '$');

I'm also including a little jsfiddle 'benchmark' so you can compare these three different approaches yourself.

Also: No, there isn't a better way of doing this than just getting the body text and counting how many '$' symbols there are.

Answer 2

You should probably use document.body.innerText or document.body.textContent to avoid getting your HTML give you false positives.

Something like this should work:

document.body.innerText.match(/\$/g).length;

An alternate way I can think of, would be to use window.find like this:

var len = 0;
while(window.find('$') === true){
    len++;
}

(This may be unreliable because it depends on where the user clicked last. It will work fine if you do it onload, before any user interaction.)