[All-OS, Web browsers, URL] Parsing URLs Query String in JavaScript

[All-OS, Web browsers, URL] Parsing URLs Query String in JavaScript


EXAMPLE/SAMPLE:


PRODUCT:     Firefox Version 11.0
             Opera Version 11.61 Revision 1250
             Internet Explorer 9.0.8112.16421 (KB2530548)
             Google Chrome Version 17.0.963.83 m
             Apple Safari Version 5.1.5 (7534.55.3)
             Avant Browser Version Ultimate 2012 build 27
             Crazy Browser Version 3.1.0 (free version)
             
OP/SYS:      Browsers tested on Windows 7 Entreprise N


COMPONENT:   URLs query string - JavaScript


SOURCE:     Philippe Vouters
            Fontainebleau/France


LOW-COST HIGH-TECH:  http://techno-star.fr


OVERVIEW:

This document highlights a solution when parsing a query string using JavaScript
with excellent Web performance, both in terms of network bandwidth and
JavaScript interpretation performances (shortest is always best). This solution 
is inspired from:
http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
(full credits to its author).


*** CAUTION ***

This sample Web code has been tested using Firefox 11.0 on Linux Fedora 16 and
all browsers in the PRODUCT section above on Windows 7 Enterprise N. However,
we cannot guarantee its effectiveness because of the possibility of error in 
transmitting or implementing it. It is meant to be used as a template for 
writing your own JavaScript, and may require modification for use on your 
system. 


PROGRAM NOTES:

The submitted problem was that
http://cftchp.blogspot.fr/2011/06/le-coin-de-webos.html
or its subsequent:
http://cftchp.blogspot.fr/2011/06/le-coin-de-webos.html?commentPage=X
with X a number ranging from 1 to 3.
was restarting the comments numbering from zero. It also happens that
such a Web site with such an URL displays at most 200 comments per displayed
page.

An analysis of the Web code highlights the following embedded JavaScript:
<script type='text/javascript'>var CommentsCounter=0;</script>
which is then incremented by one in a next JavaScript code section followed by
document.write(CommentsCounter).

Problem analysis conclusion:
When 
http://cftchp.blogspot.fr/2011/06/le-coin-de-webos.html?commentPage=X
is browser fetched, the JavaScript code with 'var CommentsCounter=0;' is
executed again. In conclusion, CommentsCounter is reinitialized each time to
zero.


PROPOSED SOLUTION:

As CommentsCounter owns at most 200 comments per commentPage, there is no need 
to modify the URL. var CommentsCounter=0 has just to be replaced by:

        var CommentsCounter = GetParameterValueByName("commentPage")*200;


TESTS:

The HTML code below is tested with:
../javascript_parsing_URL.html
../javascript_parsing_URL.html?commentPage=1
../javascript_parsing_URL.html?commentPage=4

It displays for each of the above URLs:

        CommentsCounter=0
        CommentsCounter=200
        CommentsCounter=800


HTML CODE:

<html>
<head>
<title>JavaScript getting and parsing URL</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
</script>
<!--
NOTE:
Unlike JavaScript codes in every known Web browsers, it happens that Google tool
at http://draft.blogger.com/ does not accept getParameterByName("commentPage")
coloring in yellow "commentPages". Possible workaround not yet confirmed:
replace the string "commentPage" by 'commentPage'. In every known Web browsers, 
these two syntaxes are exactly synonymous.
-->
<script type='text/javascript'>var CommentsCounter=getParameterByName("commentPage")*200;</script>
<script type='text/javascript'>
document.body.innerHTML="CommentsCounter="+CommentsCounter;
</script>
</body>
</html>


REFERENCE(S):

French Trade Union Web blog site owner concern.
Did you find this helpful? Yes No