Question

I am trying to scan my page on document load and convert all links as hyperlinks. This is saying ‘x’ is null. Can you suggest me how to do this in jquery. I am not sure if .replaceWith works

var x = document.getElementById('body');
x.innerHTML = x.innerHTML.replace(/(http:\/\/[^ ]+)/g,'<a href="$1">$1</a>/');

Answer 1

You already have access to the body via:

var x = document.body;

No need for a method.

Though there are better ways to create links than to destroy and recreate the entire DOM. Also, this will affect elements that currently have an href attribute starting with http.

---

EDIT: This is a less destructive way to accomplish what you want:

var re = /(http:\/\/[^ ]+)/g;

function createLinks( els ) {
    $(els).contents().each( function() {
        if( this.nodeType === 1 && this.nodeName !== 'script' ) {
            createLinks( this );
        } else if( this.nodeType === 3 && this.data.match( re ) ) {
            var markup = this.data.replace( re, '<a href="$1">$1</a>' );
            $( this ).replaceWith( markup );
        }
    });
}

createLinks( document.body );

Example: http://jsfiddle.net/dVsqe/

---

Or no jQuery:

var re = /(http:\/\/[^ ]+)/g;
var temp = document.createElement('div');

function createLinks( els ) {
    var nodes = els.childNodes, node;
    for( var i = 0; i < nodes.length; i++ ) {
        node = nodes[ i ];
        if( node.nodeType === 1 && node.nodeName !== 'script' ) {
            createLinks( node );
        } else if( node.nodeType === 3 && node.data.match( re ) ) {
            temp.innerHTML = node.data.replace( re, '<a href="$1">$1</a>' );
            while( temp.firstChild ) {
                node.parentNode.insertBefore( temp.firstChild, node );
            }
            node.parentNode.removeChild( node );
        }
    };
}

createLinks( document.body );

Example: http://jsfiddle.net/dVsqe/2/