Working Regex/Selector with Javascript

[grundig1988]

Evening all,

Apologies in advance - I am an absolute amateur with both Javascript and Regex/Selector, so if I am a little unclear in explaining myself please forgive me.

I am trying to monitor a webpage for changes, which I believe is largely Javascript-programmed. I have the option of using either 'Selector' or 'Regex' to monitor the website. The problem is that in this case the use of Regex/Selector isn't so simple (to me), because of the Javascript on the page.

If I highlight the entire page, the 'Selector' Text for the part I want to create a Regex/Selector expression for is as follows:

<div class="pagi" id="pages" style="display: none;"><strong>Results <span id="pages_count"></span></strong></div>

The actual text for the 'pages_count' element is "Results 1-50 of 776". Usually I would just use the simplest of expressions and do something like \b776\b i.e. if the number changed, I would be informed. This is probably highly inefficient, and I am sure there are much easier ways of doing this, but as I said, I am an amateur! In this case however the 'Pages_count' section that I would like to monitor with Regex/Selector remains constant, although the underlying data itself i.e. the actual number, in this case 776 is changing. Is there a way of using either a Selector/Regex statement to monitor the underlying 'Pages_count' data itself, because currently the data is ever-changing, but because the 'Pages_count' statement itself remains constant, I am not informed of any changes that are made. In what way could I use a Regex/Selector statement to be informed if the 776, changes to 777, for example.

I have searched high and wide for a solution, but the fact that I am an amateur with this most probably hasn't helped me. I do hope however that someone on this forum might be able to help me.

Regards,

Mark

[devnull69]

What do you mean with "you would like to be informed"?

Do you mean you would like to see some kind of popup in your browser the moment you visit the page and "something" has changed compared to your last visit?

[grundig1988]

Hi Devnull,

I already have the Google Chrome extension that monitors a web page for changes (Page Monitor) - However this extension works on the basis of Regex/Selector input. It might be quite difficult to explain how this works without you seeing it, but I will have a go, using the URL http://www.codingforums.com/index.php:

If I want the extension to inform me of any changes to, the number of threads under Javascript programming (for example), I would do as follows:

Selector - #collapseobj_forumbit_1>tr:nth-child(1)>td.alt1

This returns the output "<td class="alt1">71,147</td>" i.e. it directly monitors whether there is any change in the number 71,147

OR alternatively

Regex - \b71,147\b

HOWEVER, when I monitor javascript web pages it becomes slightly trickier.

Selector - #pages>strong

returns the output "<strong>Results <span id="pages_count"></span></strong>"....

However, when the "pages_count" actually changes e.g. from 10 to 11 for example, this is not picked up by the selector expression because the "pages_count" statement remains constant, even though the underlying data has changed (if that makes any sense whatsoever).

I believe (but might be wrong/confused) that the reason behind that is because of the Javascript programming. I realise that despite being Javascript experts it might still be that the above is explained so badly that it makes no sense, in which case I will give up now! But if anyone can provide any insight whatsoever (provided they understand what I have said) it would be of great help.

Thanks,

Mark

[Old Pedant]

What you say makes sense.

If the Chrome extension you are using only monitors the HTML as delivered from the server, then of course it couldn't see whatever JavaScript is dumping into that <span>.

If that's the case, I don't see how it makes any difference if you use Selector or RegExp: The extension simply wasn't designed to inspect the contents AFTER JavaScript has done its thing.

So you may have to change how the extension works.

I doubt that any of us can answer the question without actually installing the extension in question in our copy of Chrome and testing it out.

[grundig1988]

Thanks Old Pedant/Dev Null - that sounds fair enough - Just wanted to make sure it wasn't something I was doing wrong myself, but it makes sense that the extension simply might not accommodate for Javascript.

Thanks for solving/clarifying so quickly.

Regards,

Mark

[rnd me]

if this is on a page you control, you can simply re-create the extension's scraping selectors in client-side JS, and call a page reload when one changes, thus invoking the extension shortly after the new page load.

example:

var hit=document.querySelector("#collapseobj_forumbit_1>tr:nth-child(1)>td.alt1");
var val=hit.innerHTML;
var timer=setInterval(function(){ 
    if(hit.innerHTML!=val){ clearTimeout(timer); location.reload();  } 
}, 333);

//for a demo: change the monitored HTML in 5 seconds:
setTimeout(function(){ hit.innerHTML=12345}, 5000);

if you don't control the page, you can still use greasemonkey or userscripts to inject the above JS into any page.

EDIT:
one additional thought; if you and the site don't mind the extra bandwidth consumption, you can simply reload the page every 30 seconds to trigger your extension. I'm sure there are extensions that will allow a scheduled reload, it's a feature of opera. even if you can't find one, a simple userscript can call a setTimeout("location.reload()", 30000) to get the job done.