Make SharePoint Library Single/Multiple Line Text Field Anchor Tag as an Hyperlink

If you create a link in a single line text/Multiple line text column of library ,it is not formatted right in the list view. Here it a small jQuery script to fix this issue.

The code in the calculated column “Link” looks like this:

"<a title='The mouseover text goes here' href='"&URL&"'>"&Description&"</a>"

The list view looks like this before the script is added:

And like this after the script is added:

Add a CEWP below the list view like this:

With this code:

// Updated 19.11.2009

// Reformat the url in the calculated column

reformatCalculatedColumnUrl();

function reformatCalculatedColumnUrl(){

$(".ms-listviewtable td.ms-vb2:contains('href')").each(function(){

$(this).html($(this).text())

});

}

// If grouped by the calculated column - reformat the group header

var groupHeaderClickableLink = true; // Set to false to remove the link on the groupheader

$(".ms-listviewtable td[class^='ms-gb']").each(function(){

if($(this).html().indexOf('<')>0){

// Get full HTML of group header

var rawHTML = $(this).html();

// Extract the part before the calculated column's content

var preWrap = rawHTML.substring(0,rawHTML.indexOf("<"));

// Extract the part after the calculated column's content

var postWrap = rawHTML.substring(rawHTML.lastIndexOf('>')+4);

if(!groupHeaderClickableLink){

// Find the clickable part of the calculated column's content

var linkTextStart = rawHTML.indexOf('>') + 4;

var linkTextStop = rawHTML.lastIndexOf('<');

var linkText = rawHTML.substring(linkTextStart,linkTextStop);

// Write back the HTML

$(this).html(preWrap + linkText + postWrap);

}else{

// Find the clickable part of the calculated column's content

var linkStart = rawHTML.indexOf('<');

var linkStop = rawHTML.lastIndexOf('>') + 4;

// Find raw link

var rawLink = rawHTML.substring(linkStart,linkStop);

// Find the parts to keep

var pre = rawLink.substring(0,rawLink.indexOf('href=') + 6);

var mid = rawLink.substring(rawLink.lastIndexOf('href=')+6,rawLink.indexOf('>')-1);

var post = rawLink.substring(rawLink.indexOf('>')-1);

// Get the full url and replace the < and >

var fullUrl = (pre + mid + post).replace(/</g,'<').replace(/>/g,'>');

// Write back the HTML

$(this).html(preWrap + fullUrl + postWrap);

}

});

// Disable the filter for the field named "Link"

$(".ms-viewheadertr table[displayname='Link']").parents('th:first').removeClass('ms-vh2').addClass('ms-vh2-nograd').html("Link");

// Attaches a call to the function "reformatCalculatedColumnUrl" to the "expand grouped elements function" for it to function in grouped listview's

function ExpGroupRenderData(htmlToRender, groupName, isLoaded){

var tbody=document.getElementById("tbod"+groupName+"_");

var wrapDiv=document.createElement("DIV");

wrapDiv.innerHTML="<TABLE><TBODY id="tbod"+groupName+"_" isLoaded=""+isLoaded+"">"+htmlToRender+"</TBODY></TABLE>";

tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);

reformatCalculatedColumnUrl();

}

</script>

Field with DisplayName "Link" – you must insert your own field's DisplayName here.

The jQuery-library is found here.

Jquery is also attached with it.