Skip to content Skip to sidebar Skip to footer

Converting URL Into Clickable Link Using Javascript

I have a text field called 'patentURL' in a form. The user enteres the complete URL into this field while saving the record. When the user searches for this record, the entered URL

Solution 1:

There is a non-standard function, but widely spread - link()

function makeClickable(url) {
    return String.prototype.link ? url.link(url) : '<a href="'+url+'">'+url+'</a>';
}

function makeDOMClickable(url) {
    var link = document.createElement('a');
    link.href = url;
    link.innerHTML = url;
    return link;
}

var url = "http://localhost";
document.write ( makeClickable ( url ) );
document.body.appendChild ( makeDOMClickable ( url ) );

demo


Solution 2:

If i understood correctly you should put the url in a link:

<a href = "URL_ENTERED">URL_ENTERED</a>

With javascript:

var link = document.createElement('a');//create link
link.setAttribute('href', 'URL_ENTERED');//set href
link.innerHTML = 'URL_ENTERED';//set text to be seen
document.body.appendChild(link);//add to body

Solution 3:

You can use javascript regular expression to achieve this have a look

function convert()
{
  var text=document.getElementById("url").value;
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var text1=text.replace(exp, "<a href='$1'>$1</a>");
  var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
  document.getElementById("converted_url").innerHTML=text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

this way you can convert any text into link you can find more detail here http://talkerscode.com/webtricks/convert-url-text-into-clickable-html-links-using-javascript.php


Solution 4:

Example to call href in Javascript:

function call_link() {
    location.href = 'www.google.com';
}

Post a Comment for "Converting URL Into Clickable Link Using Javascript"