Stefano Bolli: regex

Recently I needed a Javascript function to retrieve links from a HTML string. Unfortunately I couldn't use third party powerful tools like jquery, so I thought to use RegEx.
Let's assume we have a HTML page like this:

<html>
    <body>
        <a href="google.com" title="Google Site">Google</a>
        <a href="mozilla.com" title="Mozilla Site">Mozilla</a>
        <a href="blogger.com" title="Blogger Site">Mozilla</a>
    </body>
</html>

This page contains links to Google, Mozilla and Blogger. How can we get the links from the HTML content?

<script language="JavaScript" type="text/javascript">
function getLinks() {
    var html = "<html> \
                <body> \
                <a href=\"google.com\" 
                   title=\"Google Site\">Google</a> \
                <a href=\"mozilla.com\" 
                   title=\"Mozilla Site\">Mozilla</a> \
                <a href=\"blogger.com\" 
                   title=\"Blogger Site\">Blogger</a> \
                </body> \
                </html>";

    var links = [];

    html.replace(
     /[^<]*(<a href="([^"]+)" title="([^"]+)">([^<]+)<\/a>)/g, 
     function() {
        links.push(Array().slice.call(arguments, 1, 5));
    });

    alert(links.join("\n"));
}
</script>

The getLinks() function retrieves the links from the HTML content and puts them into an array. "The slice method creates a new array from a selected section of the links array". Some useful informations about the slice method here.

Test the function

So at the end we have an "array of array". If we want to retrieve a single element, we can call it as links[x][y], where x is the row and y is the column.

For example, let's assume we want to extract some information from the first link:

alert("First link (Google):\n" +
      "Destination anchor: " + links[0][1] + "\n" +
      "\"title\" attribute: " + links[0][2] + "\n" +
      "Source anchor: " + links[0][3]);

The function has several limits: for example it's case sensitive and depends on the A element. In the case above, the href and title attribute are set, but if we have an A element like this:

<a href="google.com">Google</a>

without the title attribute, the function won't work. In that case, we should modify the regex in this way

html.replace(
     /[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, 
     function() {
        links.push(Array().slice.call(arguments, 1, 4));
    });

Best regards.

I was looking for a good Javascript example to replace HTML entities with the appropriate characters and, after a long search, I found out this thread on stackoverflow. The function below, proposed by the user Tomalak, works like a charm for me:

var replaceHtmlEntites = (function() {
    var translate_re = /&(nbsp|amp|quot|lt|gt);/g;
    var translate = {
        "nbsp": " ", // Space
        "amp" : "&", // Char &
        "quot": "\"", // Char "
        "lt"  : "<", // Char <
        "gt"  : ">" // Char >
    };
    return function(s) {
        return (s.replace(translate_re, function(match, 
                                                 entity) { 
            return translate[entity];
        }) );
    }
})();

callable as

var strIn ="This string has special chars &amp; and &nbsp;";
var strOut = replaceHtmlEntites(strIn);

Best regards.

Stefano Bolli

mercoledì 5 gennaio 2011

Parsing HTML string to get links in Javascript

lunedì 29 novembre 2010

Replacing HTML entities with the appropriate characters in Javascript

Cerca nel blog

Archivio blog