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

[Jorogumo4]

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>

[Ankur Bawiskar]

Hi,

Can you share a screenshot of what you want to convert to clickable hyperlink?

Regards

Ankur

[Jorogumo4]

Hi Ankur, sorry! I just got back to checking this and the answer Kristian provided seems to be working very well.

[Kristian Juul A · Accepted solution]

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:

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. 

[Jorogumo4]

You sir, are absolutely brilliant. It would appear we are on Madrid Patch 7, not sure how up to date that is. But the script you provided above does work flawlessly. It's also broadened my mind on JS so thank you again for that.

You mention that the way I was approaching it isn't best practices? Or the example you provided that works isn't best practice? We do have lots of people loading incidents at any given time, so if this is a very taxing operation I would definitely like to know a bit more about that. I'd hate to bog our system down for this type of implementation. 

"If you are able to manipulate the text before it goes into the journal entry you can format working links"

So are you saying that maybe, by getting that code in via the Service Portal that during the submission of a ticket or a request it will make that a link, rather than doing a taxing operation such as onLoad.

How would onChange via the Client Script act to this instead?