in Javascript |

Dynamic change of link text using java script

Today I was doing some works on java script and html to make a inline virtual keyboard. But I was searching google for a script that can change the link text that means anchor tag’s text dynamically. Opps..I took more that 2 hour to solve it and make it cross browser compatible. So here I want to share the code that I used in my works and the links that helps me.

Suppose you want make  something for each click in a link it’s text will be toggled.

like:

<a href=”url here”>Show</a>

<a href=”url here”>Hide</a>

<a href=”url here”>Show</a>

<a href=”url here”>hide</a>  ….

Let’s here is the code :

<a href=”#” onclick=”showhide();”  id=”linkid”>Show</a>
<script language=”javascript”>

var link = document.getElementById(‘linkid’);
function showhide()
{
if (document.all)
{ //IS IE 4 or 5 or later
if(link.innerText==’Show’)
{
link.innerText=’Hide’;
}
else
{
link.innerText=’Show’;
}
}
//IS NETSCAPE 4 or below
if (document.layers)
{
if(link.innerText==’Show’)
{
link.innerText=’Hide’;
}
else
{
link.innerText=’Show’;
}
//alert(“NETSCAPE 4 or below”);
}
//Mozilla/Netscape6+ and all the other Gecko-based browsers
if (document.getElementById &&!document.all)
{
if(link.firstChild.nodeValue==’Show’)
{
link.firstChild.nodeValue=’Hide’;
}
else
{
link.firstChild.nodeValue=’Show’;
}
//alert(link.firstChild.nodeValue);
//alert(” by id and not all”);

}
}
</script>
This code is compatible with most known browsers..:D

Another way:

function toggleshowhide()
{
var anchors = document.getElementsByTagName(“a”);
for(var i = 0; i < anchors.length; ++i)
{
if(anchors[i].firstChild.data == “Show”)
{
anchors[i].replaceChild(document.createTextNode(“Hide”),
anchors[i].firstChild);
}
else if(anchors[i].firstChild.data == “Hide”)
{
anchors[i].replaceChild(document.createTextNode(“Show”),
anchors[i].firstChild);
}
}
}

Published

  2. I have gotten some ideas and working on getting there but apparently it does not work on all browsers and is just not working for me.

    This is what I have so far:

    var list={"speed":"www.ewagz.com","limit":"www.ewagz.com"};

    for(var word in list)

    {

    var url=list[word];

    }

    var func=new Function("match","var link=document.createElement("A"); link.textContent=match; link.setAttribute("href",""+url+""); return link;}");

    function replaceTextContent(regexp,handler) {

    var snapshots=document.evaluate("//body//text()",document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);

    for(var num1=0;num1<snapshots.snapshotLength;num1++) {

    regexp.lastIndex=0;

    var node1=snapshots.snapshotItem(num1);

    if (isALink(node1)) continue;

    var match1=regexp.exec(node1.textContent);

    if (match1) {

    var node2=node1.parentNode;

    var node3=node1.nextSibling;

    node2.removeChild(node1);

    while (match1) {

    if(isALink(node2)) {

    node2.insertBefore(document.createTextNode(RegExp.leftContext),node3);

    try{node2.insertBefore(handler(match1),node3);}

    catch(ex){node2.insertBefore(document.createTextNode(match1),node3);}

    regexp.lastIndex=0;

    match1=regexp.exec(RegExp.rightContext);

    }

    }

    node2.insertBefore(document.createTextNode(RegExp.rightContext),node3);

    }

    }

    }

    Do you think you can help me, either by modifying this to work or scratching and starting fresh. Thanks

  3. @frank

    Yes it can be done easily and not too hard. The idea may be link this. After the whole page is loaded I mean the dom,
    1. Get the whole html.
    2. Search with regex for specific word (here content in your word)
    3.Replace the matched text with specific word.

    The task is simple but need some time to do 😀

  4. Hi,
    Just a quick question. I found you page by searching "change text to link". I am looking for a .js file that I can use on my site http://ewagz.com. What I am trying to do is add a file (.js) that will execute after the page loads, searching the content and changing text to a link (other pages within the site). The text and hyperlink value would be set in the .js file.
    Do you think you can help, or have any suggestions?
    Thanks,
    frank at ewagz.com

Comments are closed.