InnerHTML into links

[littleredhairedgirl]

I have a page that loads some text into a div
What I'd link to do is (re)create each word into a link.

so loop thru each word in the div with innerHtml and wrapping it with
anchor tag



<script language="javascript" type="text/javascript">
function linkWord(obj){
{
sObj.link="http://groups.google.com/groups/search?q=";
for(i in obj){
var x = document.body.innerHTML;
var linkStart = '<a href="'+ x +'">';
var linkEnd = '&btnG=Search&sitesearch=groups.google.com</a>';
x = linkStart + x + linkEnd);
document.body.innerHTML = x;
}

</script>

 

[tcole6]

I have a page that loads some text into a div
What I'd link to do is (re)create each word into a link.

so loop thru each word in the div with innerHtml and wrapping it with
anchor tag

<script language="javascript" type="text/javascript">
function linkWord(obj){
    {
    sObj.link="http://groups.google.com/groups/search?q=";
    for(i in obj){
    var x = document.body.innerHTML;
    var linkStart = '<a href="'+  x  +'">';
    var linkEnd = '&btnG=Search&sitesearch=groups.google.com</a>';
    x =  linkStart + x + linkEnd);
    document.body.innerHTML = x;
    }

    </script>

Not sure if this is exactly what you're looking for.. a little clunky
and there will be some loss of formatting, but:

function linkWords(element) {
var words = element.innerHTML.split(" "); //split innerHTML on a
space...
element.innerHTML = ""; // clear the innerHTML..
for (var i = 0; i < words.length; i++) {
var word = words.replace(/^\s+|\s+$/g, ''); //get the next 'word'
and trim any white space...
if (word.length > 0) { //we have a word, let's create an anchor for
it...
var anchor = document.createElement("a");
anchor.href = "http://www.google.com/search?q=" + word;
anchor.innerHTML = word;
div.appendChild(anchor);
div.appendChild(document.createTextNode(" ")); // put a space in
between the links.
}
}
}

Of course this assumes that there will only be text inside the
'element' that is passed to the function. Should there be other
elements, kinda ugly...

Something like this might work better if the innerHTML of the passed
'element' will contain HTML:

function createLinks(element) {
for (var c = 0; c < element.childNodes.length; c++) {
var node = element.childNodes[c];
if (node.nodeType == 3) { //text node...
var words = node.nodeValue.split(" ");
var span = document.createElement("span");
for (var i = 0; i < words.length; i++) {
var word = words.replace(/^\s+|\s+$/g, '');
if (word.length > 0) {
var anchor = document.createElement("a");
anchor.href = "http://www.google.com/search?q=" + word;
anchor.innerHTML = word;
span.appendChild(anchor);
span.appendChild(document.createTextNode(" "));
}
}
element.replaceChild(span, node);
}
else {
createLinks(node);
}
}
}

The idea is that this will replace only text nodes with links, leaving
the rest of the underlying HTML alone. But I really didn't have time
to properly test it.

But maybe someone with some more skills than myself can clean this up
for you Should at least get you started.

 

[tcole6]

I have a page that loads some text into a div
What I'd link to do is (re)create each word into a link.

so loop thru each word in the div with innerHtml and wrapping it with
anchor tag

<script language="javascript" type="text/javascript">
function linkWord(obj){
    {
    sObj.link="http://groups.google.com/groups/search?q=";
    for(i in obj){
    var x = document.body.innerHTML;
    var linkStart = '<a href="'+  x  +'">';
    var linkEnd = '&btnG=Search&sitesearch=groups.google.com</a>';
    x =  linkStart + x + linkEnd);
    document.body.innerHTML = x;
    }

    </script>

Not sure if this is exactly what you're looking for.. a little clunky
and there will be some loss of formatting, but:

function linkWords(element) {
    var words = element.innerHTML.split(" "); //split innerHTML on a
space...
    element.innerHTML = ""; // clear the innerHTML..
    for (var i = 0; i < words.length; i++) {
        var word = words.replace(/^\s+|\s+$/g, ''); //get the next 'word'
and trim any white space...
        if (word.length > 0) { //we have a word, let's create an anchor for
it...
                var anchor = document.createElement("a");
                anchor.href = "http://www.google.com/search?q=" + word;
                anchor.innerHTML = word;
                div.appendChild(anchor);
                div.appendChild(document.createTextNode("")); // put a space in
between the links.
        }
    }

}

Of course this assumes that there will only be text inside the
'element' that is passed to the function. Should there be other
elements, kinda ugly...

Something like this might work better if the innerHTML of the passed
'element' will contain HTML:

function createLinks(element) {
    for (var c = 0; c < element.childNodes.length; c++) {
        var node = element.childNodes[c];
        if (node.nodeType == 3) { //text node...
                var words = node.nodeValue.split(" ");
                var span = document.createElement("span");
                for (var i = 0; i < words.length; i++) {
                        var word = words.replace(/^\s+|\s+$/g, '');
                        if (word.length > 0) {
                                var anchor = document.createElement("a");
                                anchor.href = "http://www.google.com/search?q=" + word;
                                anchor.innerHTML = word;
                                span.appendChild(anchor);
                                span.appendChild(document.createTextNode(" "));
                        }
                }
                element.replaceChild(span, node);
        }
        else {
                createLinks(node);
        }
    }

}

The idea is that this will replace only text nodes with links, leaving
the rest of the underlying HTML alone. But I really didn't have time
to properly test it.

But maybe someone with some more skills than myself can clean this up
for you Should at least get you started.

I did a little testing. The second function seems to work pretty good
in both cases. Didn't have anything too extreme I could test, but I
tried placing entire web page contents inside the passed 'element' and
it seemed to convert all the text to links and left the original
format exactly as it was.

Kinda neat.

 

[littleredhairedgirl]

Thanx Cole that's so cool

On Jul 8, 9:28 am, littleredhairedgirl <[email protected]>
wrote:

Not sure if this is exactly what you're looking for.. a little clunky
and there will be some loss of formatting, but:

function linkWords(element) {
    var words = element.innerHTML.split(" "); //split innerHTML on a
space...
    element.innerHTML = ""; // clear the innerHTML..
    for (var i = 0; i < words.length; i++) {
        var word = words.replace(/^\s+|\s+$/g, ''); //get the next 'word'
and trim any white space...
        if (word.length > 0) { //we have a word, let's create an anchor for
it...
                var anchor = document.createElement("a");
                anchor.href = "http://www.google.com/search?q=" + word;
                anchor.innerHTML = word;
                div.appendChild(anchor);
                div.appendChild(document.createTextNode(" ")); // put a space in
between the links.
        }
    }

}

Of course this assumes that there will only be text inside the
'element' that is passed to the function. Should there be other
elements, kinda ugly...

Something like this might work better if the innerHTML of the passed
'element' will contain HTML:

function createLinks(element) {
    for (var c = 0; c < element.childNodes.length; c++) {
        var node = element.childNodes[c];
        if (node.nodeType == 3) { //text node...
                var words = node.nodeValue.split(" ");
                var span = document.createElement("span");
                for (var i = 0; i < words.length; i++) {
                        var word = words.replace(/^\s+|\s+$/g, '');
                        if (word.length > 0) {
                                var anchor = document.createElement("a");
                                anchor.href = "http://www.google.com/search?q=" + word;
                                anchor.innerHTML = word;
                                span.appendChild(anchor);
                                span.appendChild(document.createTextNode(" "));
                        }
                }
                element.replaceChild(span, node);
        }
        else {
                createLinks(node);
        }
    }

}

The idea is that this will replace only text nodes with links, leaving
the rest of the underlying HTML alone. But I really didn't have time
to properly test it.

But maybe someone with some more skills than myself can clean this up
for you Should at least get you started.

I did a little testing. The second function seems to work pretty good
in both cases. Didn't have anything too extreme I could test, but I
tried placing entire web page contents inside the passed 'element' and
it seemed to convert all the text to links and left the original
format exactly as it was.

Kinda neat.

 

[Evertjan.]

littleredhairedgirl wrote on 09 jul 2009 in comp.lang.javascript:

Thanx Cole that's so cool

[Please do not toppost on usenet]

Why do you thank Cole for the core temperature of innerHTML?