Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Working Regex/Selector with Javascript

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,344
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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:
    Code:
    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.
    Last edited by rnd me; 11-14-2012 at 10:51 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •