How do I convert a URL within a span to a clickable hyperlink?

Jorogumo4
Tera Expert

Basically what I'm trying to implement within our Incident Table is that, anytime there is a link (i.e. www, https, http, .com) the script client will run onLoad and convert that URL to a clickable hyperlink. I've been digging around a lot and can't quite get it to work for my use.

I was able to find the Element ID of the notes section of the Incident table. However I'm still very much a noob to SN Dev work and still very much a noob when it comes to JS.

I hope I explained this clearly. Thank you in advance for all your help!

function onLoad() {
	//Auto-Detect URL and convert to clickable HTML link
	var txt = document.getElementById("sn_form_inline_stream_entries").value;
	var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	var txt1 = txt.replace(exp, "<a href='$1'>$1</a>");
	var exp2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
	document.getElementById("sn_form_inline_stream_entries").innerHTML=txt1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

Below is an example of the span I'm wanting to modify. This span is within the Element ID sn_form_inline_stream_entries.

Basically wanting to turn that https://www.google.com/ into a clickable link.

<span class="sn-widget-textblock-body sn-widget-textblock-body_formatted">Hey I was having issues connecting to this website. https://www.google.com/ Please send help!</span>
1 ACCEPTED SOLUTION

Kristian Juul A
Kilo Expert

The element ’sn_form_inline_stream_entries’ contains the entire activity stream and you will be manipulating a potentially huge chunk of the DOM that might already contain working links. Instead you could grab the specific elements that can contain text URIs.

function onLoad() { 
	
  var regEx = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var linkTemplate = '<a href="$1" target="_blank">$1</a>';

  var activityStream = document.getElementById('sn_form_inline_stream_entries');
  var textBlocks = activityStream.querySelectorAll('.sn-widget-textblock-body');
  textBlocks.forEach(function (textBlock) {
    textBlock.innerHTML = textBlock.innerHTML.replace(regEx, linkTemplate);
  });
   
}

I assume that your regular expression does what you need it to do.

For this to work in current versions of ServiceNow you will have to set “Isolate script” to false on the client script:

find_real_file.png

This is not best practice and will break if the structure of the activity stream changes. It is a rather expensive operation to have running on every form load.

If you are able to manipulate the text before it goes into the journal entry you can format working links with the [code] tag and avoid the script running client side:

This link [code]<a href="https://www.example.com/" target="blank">https://www.example.com/</a>[/code] is an example. 

View solution in original post

13 REPLIES 13

Ah, I thought you were getting the data from a record producer where you can manipulate the value before it goes into the Additional Comments field.

I don’t know of any feasible solution to changing the value after it has been added to Additional Comments. Journal fields are funny like that. I think it would involve manipulating the sys_audit and sys_journal_field tables, and you probably don’t want to go there.

Maybe start a new thread with this more specific question? If you do, please post a link here.

Yeah, I don't believe there is a way for me to modify the comment section from the record producer, but then again I could be completely wrong. However!!! With all of your help I've been able to learn a lot about ServiceNow which I'm very thankful for! So I've compiled all my testing and outcomes into a new thread with a more specific question geared towards it.

https://community.servicenow.com/community?id=community_question&sys_id=a88ae1d7db344cd05ed4a851ca96...

Hopefully this clears up some of the fog on my original question and my apologize! I'm still very new to ServiceNow but I'm loving every second of it hahah.

Kamy
Tera Contributor

Hi @Jorogumo4  

I have the same implementation and have opened a separate question and came across this in the community. I have implemented this solution and was curious to know if you were able to resolve the link showing both in text and as hyperlink. Any insights would be great! 

Thank you!!

DeepaR
Tera Contributor

Thank you for the solution.