0

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>/');
theshadowmonkey
  • 689
  • 8
  • 26

3 Answers3

3

body is not the 'id' of the body element; it's the tag-name or, in JavaScript, the tagName. Therefore you should use the appropriate JavaScript method getElementsByTagName(). As this returns (potentially) a number of elements, you have to specify which of the returned elements you want to work with, in this case the first (and only, I'd imagine), which in JavaScript is the zero-th, so instead you should use:

var x = document.getElementsByTagName('body')[0];

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
3

in jQuery

$('body').html( $('body').html().replace(/(http:\/\/[^ ]+)/g,'<a href="$1">$1</a>/'));
Johnny Craig
  • 4,974
  • 2
  • 26
  • 27
  • Yeah, but ideally when I use this line inside document.ready(Function(){});, then all links in my document body should appear as hyperlinks....but, they dont..can you help me – theshadowmonkey Jul 27 '11 at 17:30
  • link me to your html, so i can reproduce it on my computer – Johnny Craig Jul 27 '11 at 17:31
  • Hi Johnny your solurion is good if the page didnt have any anchor tags. If there are anchors it adds an extra anchor. But, thank you for the response. – theshadowmonkey Jul 28 '11 at 13:29
  • if u add a space before http in the regex then it should fix that problem. i have edited the code to reflect that.. but that will assume all urls have s space before them, but i dont see why it would be any other way? – Johnny Craig Jul 28 '11 at 15:40
  • Hi johnny the regex doesn't work at all. I am sorry. Correct me if I am wrong. – theshadowmonkey Jul 28 '11 at 21:23
  • i removed the edit for the space, when i have time ill playwith it. im at work now – Johnny Craig Jul 28 '11 at 21:46
3

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/

user113716
  • 318,772
  • 63
  • 451
  • 440
  • Hi patrick, the node type is not working when native JS library is downloaded and used. When I use google APi's, then it is working. Any inputs please... – theshadowmonkey Aug 02 '11 at 14:29
  • @macho: Are you saying that it works when you load jQuery from google, but not when you download jQuery and use your local copy? – user113716 Aug 02 '11 at 14:33
  • yeah....I am loading jquery 1.3 from google and it works fine. But, using jquery 1.4.1 from my local copy doesn;t show any result. – theshadowmonkey Aug 02 '11 at 14:54
  • can u have a look at this http://forum.jquery.com/topic/bug-1-3-b1-selector-nodetype-3-not-working – theshadowmonkey Aug 02 '11 at 14:55
  • @macho: There were breaking changes between jQuery 1.3 and 1.4. You'll either need to update your code for 1.4 or download 1.3 and use that. – user113716 Aug 02 '11 at 15:03
  • I have two applications where one is based on 1.3 and the other 1.4. I am not sure why the code snippet you gave doesn't work on 1.4. Can you suggest any changes in your code to make it work on 1.4. Thank You. – theshadowmonkey Aug 02 '11 at 18:15
  • @macho: If you're talking about the first snipped, it does work with `1.4`. If you click the example and look at the menu on the left, it's running `jQuery 1.4.4`. I'd assume that there's some other code you're running that doesn't translate from 1.3 to 1.4. – user113716 Aug 02 '11 at 18:36
  • ...if you're trying to use `[nodeType = 3]`, then that isn't part of my code, and it isn't a valid way to select text nodes (as of 1.4 anyway). – user113716 Aug 02 '11 at 18:39