JavaScript generate an result array from XPATH

This is a function in JavaScript that use an XPATH string to generate an Array from the results.This is very useful if you have to manipulate or use some items on a page and don’t have the id(like bots).

That is the function:

function matches2array (XPATH){
  var links = new Array();
  var elements = 0;
  var xPathRes = document.evaluate (XPATH, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  var actualSpan = xPathRes.iterateNext ();
  while (actualSpan) {
    links[elements] = actualSpan;
    actualSpan = xPathRes.iterateNext ();
    ++elements;
  }
  return(links);
}

You could use it in the Terminal:

matches2array("//a");

And we get all hrefs on this page in the Terminal:

[a.skip-link.screen-reader-text #content, a scheinast.eu, a /category/c-sharp/, a /category/c/, a /category/fortran/, a /category/bash/, a /category...-css-js/, a /category/java/, a /category/perl/, a /category/php/, a /category/projects/, a /category/regex/, a /category...-tricks/, a /category/windows/, a /perl-str...nchmark/, a /regex-fi...strings/, a /how-to-o...desktop/, a /c-calculator/, a /javascri...ocation/, a /image-uploader/, a /wp-admin/, a wp-login....68d8990f, a /feed/, a /comments/feed/, a wordpress.org, a.a2a_button_facebook /, a.a2a_button_twitter /, a.a2a_button_google_plus /, a.a2a_dd.addtoany_share_save share_sav...2F%5D..., a /calculator-in-c/, a.url.fn.n /author/p...heinast/, a /category/c/, a /tag/c/, a /tag/calculator/, a.post-edit-link post.php?...ion=edit, a#cancel-comment-reply-link /calculat...#respond, a profile.php, a wp-login....68d8990f, a /new-hompage-design/, a /backtrack-how-to/, a.a2a_button_facebook /, a.a2a_button_twitter /, a.a2a_button_google_plus /, a.a2a_dd.addtoany_share_save share_sav...2F%5D..., a.screen-reader-shortcut #wp-toolbar, a.ab-item about.php, a.ab-item about.php, a.ab-item wordpress.org, a.ab-item codex.wordpress.org, a.ab-item /support/, a.ab-item requests-...feedback, a.ab-item admin.php...tics.php, a.ab-item admin.php...ine_menu, a.ab-item admin.php...tics.php, a.ab-item /wp-admin/, a.ab-item /wp-admin/, a.ab-item themes.php, a.ab-item customize...D=themes, a.ab-item customize...-in-c%2F, a.ab-item widgets.php, a.ab-item customize...=widgets, a.ab-item nav-menus.php, a.ab-item themes.ph...ckground, a.ab-item customize...nd_image, a.ab-item themes.ph...m-header, a.ab-item customize...er_image, a.ab-item edit-comments.php, a.ab-item post-new.php, a.ab-item post-new.php, a.ab-item media-new.php, a.ab-item post-new....ype=page, a.ab-item user-new.php, a.ab-item post.php?...ion=edit, a.ab-item profile.php, a.ab-item profile.php, a.ab-item profile.php, a.ab-item wp-login....68d8990f, a.screen-reader-shortcut wp-login....68d8990f, a.a2a_i.a2a_sss /, a.a2a_i.a2a_sss /, a.a2a_i.a2a_sss /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a, a.a2a_i.a2a_sss /, a.a2a_i.a2a_sss /, a.a2a_i.a2a_sss /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a.a2a_i /, a#a2apage_any_email.a2a_i.a2a_emailer /, a#a2apage_email_client.a2a_i.a2a_emailer.a2a_email_client /, a#a2apage_show_more_less.a2a_menu_show_more_less.a2a_more]

Use it to store it in an Array and then write it on the page:

var scripts = matches2array("//a");

for (i=0;i<scripts.length;i++){
document.write(scripts[i] + "\n");
}

and we got this result:

http://scheinast.eu/calculator-in-c/#content http://scheinast.eu/ http://scheinast.eu/category/c-sharp/ http://scheinast.eu/category/c/ http://scheinast.eu/category/fortran/ http://scheinast.eu/category/bash/ http://scheinast.eu/category/html-css-js/ http://scheinast.eu/category/java/ http://scheinast.eu/category/perl/ http://scheinast.eu/category/php/ http://scheinast.eu/category/projects/ http://scheinast.eu/category/regex/ http://scheinast.eu/category/tips-and-tricks/ http://scheinast.eu/category/windows/ http://scheinast.eu/perl-strict-benchmark/ http://scheinast.eu/regex-find-interpolate-strings/ http://scheinast.eu/how-to-open-remote-desktop/ http://scheinast.eu/c-calculator/ http://scheinast.eu/javascript-location/ http://scheinast.eu/image-uploader/ http://scheinast.eu/wp-admin/ http://scheinast.eu/wp-login.php?action=logout&_wpnonce=a768d8990f http://scheinast.eu/feed/ http://scheinast.eu/comments/feed/ https://wordpress.org/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ https://www.addtoany.com/share_save#url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&title=Calculator%20in%20C%2B%2B&description=This%20is%20my%20calculator%20in%20C%2B%2B%20with%20in-line%20assembler%3A%20%5Bcrayon-556e97ccb93bc417229824%2F%5D%20Compile%20the%20code%3A%20%5Bcrayon-556e97ccb93e1826855153%2F%5D%20output%3A%20%5Bcrayon-556e97ccb93f8566053665%2F%5D... http://scheinast.eu/calculator-in-c/ http://scheinast.eu/author/paul-scheinast/ http://scheinast.eu/category/c/ http://scheinast.eu/tag/c/ http://scheinast.eu/tag/calculator/ http://scheinast.eu/wp-admin/post.php?post=1542&action=edit http://scheinast.eu/calculator-in-c/#respond http://scheinast.eu/wp-admin/profile.php http://scheinast.eu/wp-login.php?action=logout&redirect_to=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&_wpnonce=a768d8990f http://scheinast.eu/new-hompage-design/ http://scheinast.eu/backtrack-how-to/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ https://www.addtoany.com/share_save#url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&title=Calculator%20in%20C%2B%2B%20%7C%20Paul%20Scheinast&description=This%20is%20my%20calculator%20in%20C%2B%2B%20with%20in-line%20assembler%3A%20%5Bcrayon-556e97ccb93bc417229824%2F%5D%20Compile%20the%20code%3A%20%5Bcrayon-556e97ccb93e1826855153%2F%5D%20output%3A%20%5Bcrayon-556e97ccb93f8566053665%2F%5D... http://scheinast.eu/calculator-in-c/#wp-toolbar http://scheinast.eu/wp-admin/about.php http://scheinast.eu/wp-admin/about.php https://wordpress.org/ https://codex.wordpress.org/ https://wordpress.org/support/ https://wordpress.org/support/forum/requests-and-feedback http://scheinast.eu/wp-admin/admin.php?page=wp-statistics/wp-statistics.php http://scheinast.eu/wp-admin/admin.php?page=wps_online_menu http://scheinast.eu/wp-admin/admin.php?page=wp-statistics/wp-statistics.php http://scheinast.eu/wp-admin/ http://scheinast.eu/wp-admin/ http://scheinast.eu/wp-admin/themes.php http://scheinast.eu/wp-admin/customize.php?url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&autofocus%5Bsection%5D=themes http://scheinast.eu/wp-admin/customize.php?url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F http://scheinast.eu/wp-admin/widgets.php http://scheinast.eu/wp-admin/customize.php?url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&autofocus%5Bpanel%5D=widgets http://scheinast.eu/wp-admin/nav-menus.php http://scheinast.eu/wp-admin/themes.php?page=custom-background http://scheinast.eu/wp-admin/customize.php?url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&autofocus%5Bcontrol%5D=background_image http://scheinast.eu/wp-admin/themes.php?page=custom-header http://scheinast.eu/wp-admin/customize.php?url=http%3A%2F%2Fscheinast.eu%2Fcalculator-in-c%2F&autofocus%5Bcontrol%5D=header_image http://scheinast.eu/wp-admin/edit-comments.php http://scheinast.eu/wp-admin/post-new.php http://scheinast.eu/wp-admin/post-new.php http://scheinast.eu/wp-admin/media-new.php http://scheinast.eu/wp-admin/post-new.php?post_type=page http://scheinast.eu/wp-admin/user-new.php http://scheinast.eu/wp-admin/post.php?post=1542&action=edit http://scheinast.eu/wp-admin/profile.php http://scheinast.eu/wp-admin/profile.php http://scheinast.eu/wp-admin/profile.php http://scheinast.eu/wp-login.php?action=logout&_wpnonce=a768d8990f http://scheinast.eu/wp-login.php?action=logout&_wpnonce=a768d8990f http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ https://www.addtoany.com/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/ http://scheinast.eu/calculator-in-c/

JavaScript string contains

This is a simple function in JavaScript, I use it to check if a string contains another string.The different in this function is that the return value is the position+1.So you could use it in an If without to check the return value manually, just see my test from 1 to 3.

This is the function:

function string_contains(str,needle) {
return(str.indexOf(needle)+1);
}

Now we make a little test to see if it work:

//Test 1
if(string_contains("abcdef","a")){
console.log("abcdef contains a");
}else{
console.log("abcdef not contains a");
}
//Test 2
if(string_contains("abcdef","b")){
console.log("abcdef contains b");
}else{
console.log("abcdef not contains b");
}
//Test 3
if(string_contains("abcdef","z")){
console.log("abcdef contains z");
}else{
console.log("abcdef not contains z");
}

Seems good:

abcdef contains a
abcdef contains b
abcdef not contains z

JavaScript element exists

This is a JavaScript Function to check if an element exists, I use it regularly in an If.

The function:

function element_exists (elem) {
  return((elem)?1:0);
}

The test:

//Test1
if(element_exists(document.getElementById("masthead"))){
console.log("element exists");
}else{
console.log("element not exists");
}
//Test2
if(element_exists(document.getElementById("masthead1"))){
console.log("element exists");
}else{
console.log("element not exists");
}

Our result:

element exists
element not exists

We could see it works as it should.

XPATH

The XPATH(XML Path Language) is a query language from the W3C, it is used to select nodes in an XML file.

Full Path

/html/body/div

In this example I start with “/” that say we start on root and then i navigate from element to element.

 

Anywhere

//a

In this example I use the “//” to search in the full document to find all a nodes.(you could use the “//” behind a “/” like “/html/body/div//a” to find all elements in html body div.)

 

Attributes

//div[@class="secondary"]

you could use the “@” to find all elements wit the attribute class that is the string “secondarary”.

 

As example you could select all hrefs where the Attributes contains a string:

//a[contains(@href,"scheinast")]

Or select all hrefs where the text from the URL contains a string:

//a[contains(text(),"Scheinast")]

 

Array

//a[1]

If you select all Elements you get an Array, in the example above I select the firs element from my result Array.You should avoid this, better is to navigate over the class or ID because if the Page changes a bit the XPATH don’t work any more.

 

That are some basics, if you need something special take a look into the Network or on my page.As example Web crawling in PHP or Perl.

JavaScript location

In this article I wrote about the location object in JavaScript and what are the different between them.

Host

This two prints the host name, the different between them are that only host is with the port number from the host.

console.log(location.host);
console.log(location.hostname);

as example:

http://example.com:8080/

and we get this:

example.com:8080
example.com

 

Port

If you just want to get the Port you could use this:

console.log(location.port);

as example:

http://example.com:8080/

and we get this:

8080

Together with “location.host” and “location.port” you could get “location.hostname”.

 

Protocol

To get the Server protocol you just need this:

console.log(location.protocol);

as example:

http://example.com:8080/

and we get this:

http:

 

Href,Origin and Pathname

To get some other URL information run this:

console.log(location.href);
console.log(location.origin);
console.log(location.pathname);
console.log(window.location.search);

as example:

http://example.com/test/?s=test

and we get this:

http://example.com/category/c/
http://example.com
/category/c/
?s=test

Href just returns the URL with the pathname, origin just the URL without the pathname, pathname just the path behind the URL and at least the search parameter returns the parameters behind the “?”.

Apache 2.2 Browser-Caching

If you want to enable the browser cache with the new Apache 2.2, you have to enable the module rewrite first and then to restart the Apache:

sudo a2enmod rewrite && /etc/init.d/apache2 restart

Add this to the File “/etc/apache2/apache2.conf” :

<ifmodule mod_expires.c>
ExpiresActive on
ExpiresByType image/x-icon “access plus 2 month”
ExpiresByType image/png “access plus 2 month”
ExpiresByType image/jpg “access plus 2 month”
ExpiresByType image/gif “access plus 2 month”
ExpiresByType image/jpeg “access plus 2 month”
ExpiresByType application/pdf “access plus 2 month”
ExpiresByType audio/x-wav “access plus 2 month”
ExpiresByType audio/mpeg “access plus 2 month”
ExpiresByType video/mpeg “access plus 2 month”
ExpiresByType video/mp4 “access plus 2 month”
ExpiresByType video/quicktime “access plus 2 month”
ExpiresByType video/x-ms-wmv “access plus 2 month”
ExpiresByType application/x-shockwave-flash “access 2 month”

ExpiresByType text/css “access plus 24 hour”
ExpiresByType text/javascript “access plus 2 hour”
</ifmodule>

This is an example config, for images I choose 2,CSS 1day and for JavaScript 2 Hours from the last access.

JavaScript Regex tester

This is a little JavaScript Regex tester, just write your Regex as example "\d" or "\w" and a test string like "123abc". It is more like an example as an real use function, but you can see how it works and handle the matches. Try it:

Matches:
Code:
<html>
<script>
function myFunction() {
if(document.getElementById("regex").value == ""){
document.getElementById("result").innerHTML = "No Regex";return(0);
}
var re = RegExp(document.getElementById("regex").value, 'g');
document.getElementById("result").innerHTML = 
re.execAll(document.getElementById("text").value);
}
RegExp.prototype.execAll = function(string) {
    var match = null;
    var matches = new Array();
    while (match = this.exec(string)) {
        var matchArray = [];
        for (i in match) {
            if (parseInt(i) == i) {
                matchArray.push(match[i]);
            }
        }
        matches.push(matchArray);
    }
    return matches;
}
</script>
<body>
<textarea id="regex" rows="1" cols="50" onchange="myFunction()" onkeyup="myFunction()" placeholder="Your Regex here..."></textarea>
<br>
<textarea id="text" rows="4" cols="50"onchange="myFunction()" onkeyup="myFunction()" placeholder="Your Text here..."></textarea>
<br>
Matches:
<div id="result"></div>
</body>
</html>

JavaScript generate and delete html inputs

This generates a new text box with a unique id if you hit the Add button, but if you hit the remove button it removes the last text box.
Try it:

   
<!DOCTYPE html>
<html>
<script>
var elements = 0;
function count(elem){
elements=0;
var xPathRes = document.evaluate ('//div[@id="'+elem+'"]/div', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var actualSpan = xPathRes.iterateNext ();
while (actualSpan) {
++elements;
actualSpan = xPathRes.iterateNext ();
}
}
function add(elem) {
        count(elem);
        if(elements <=10){
                document.getElementById(elem).innerHTML+='<div id="SPECIAL_DIV_'+elements+'" >TB'+elements+':<input type="text" id="SPECIAL_TB_'+elements+'" ></div>';
        }
}
function del(elem) {
        count(elem);
        if(elements >=1){
                document.getElementById("SPECIAL_DIV_"+(elements-1)).remove();
        }
}
</script>
<body>
<button onclick="add('demo');">Add</button>
<button onclick="del('demo');">Remove</button>
<br>
<div id="demo">
</div>
</body>
</html>
The count function counts the current text boxes, I used XPATH for this and then iterate trough the results to count them.

JavaScript in word press post

Sometimes I want to post some examples about JavaScript and html, but word press removes the JavaScript so it don't work, for that I installed the JavaScript-Inline-Plugin now you could wrote your code like that:



<html>
</html>
But don't forget so do this in the Text tab, and if you move back to Visual its gone... that's annoying but the best what I found ....

JavaScript replace all

This is a little example how to replace all matches with replace.
<!DOCTYPE html>
<html>
<body>

<p>Click the button to replace "i" with "X" in the paragraph below:</p>

<p id="demo">Visit Microsoft!</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = AllReplace(str,"i", "X");
    document.getElementById("demo").innerHTML = res;
}

function AllReplace(str,find,replace){
while(str != str.replace(find,replace)){
  str = str.replace(find,replace);
}
return(str);
}

</script>

</body>
</html>

Click the button to replace "i" with "X" in the paragraph below:

Visit Microsoft!