Scenario

Using JavaScript to call the SharePoint search REST API, to return items matching a certain query and display them on the page. If one of the fields you’re displaying is a Hyperlink field, it gets returned in the format:

"http://url/path/here, Description Text Here"

In order to display this link, you’d probably write some code that looks like this:

// data.hyperlinkfieldname == "http://url/path/here, Description Text Here"
var linkArr = data.hyperlinkfieldname.split(', ');

item.linkUrl = linkArr[0]; // Value: 'http://url/path/here'
item.linkDesc = linkArr[1];// Value: 'Description Text Here'

Problem

The problem with this becomes apparent when we have a URL (often in a file name, but some sites also use commas when storing state values in the URL) or Description with a comma in it. It turns out that SharePoint doesn’t URL encode commas in the string values before returning them in a comma separated string.

This means when we have an Hyperlink field with a URL value of “https://www.google.com/search?q=Here, There, and Everywhere” and a Description of “Here, There, and Everywhere“, we wind up getting the following back from SharePoint:

"https://www.google.com/search?q=Here,, There,, and Everywhere, Here, There, and Everywhere"

Which makes our above code now have the following values:

// data.hyperlinkfieldname == "https://www.google.com/search?q=Here,, There,, and Everywhere, Here, There, and Everywhere"
var linkArr = data.hyperlinkfieldname.split(', ');

item.linkUrl = linkArr[0]; 
// Value: 'https://www.google.com/search?q=Here' 
// Should be: 'https://www.google.com/search?q=Here, There, and Everywhere'

item.linkDesc = linkArr[1];
// Value: '' 
// Should be 'Here, There, and Everywhere'

When I first encountered this issue, I was just using the URL portion, and I completely missed the fact that SharePoint was sticking *two* commas into the URL in place of the single comma that was there.

In other words, SharePoint was “encoding” those commas by doubling them, the same way SharePoint requires us to do with quotes when we want to include a quote as part of our query text.

Solution

For my simple case of just getting the URL, it was just a matter of updating the code to replace those double commas as a URL encoded single comma:

// data.hyperlinkfieldname == "https://www.google.com/search?q=Here,, There,, and Everywhere, Here, There, and Everywhere"
var linkArr = data.hyperlinkfieldname.replace(/,,/g, '%2C').split(', ');

item.linkUrl = linkArr[0]; 
// Value: 'https://www.google.com/search?q=Here%2C There%2C and Everywhere'

item.linkDesc = linkArr[1];
// Value: 'Here' 
// Should be 'Here, There, and Everywhere'

However you’ll notice that the Description text returned from SharePoint does *not* have double commas in it. That seems bizarre to me, but that’s how it works… which means our above code still doesn’t give us the correct Description for the hyperlink field.

In order to get the Description field, we’ll want to update our code:

// data.hyperlinkfieldname == "https://www.google.com/search?q=Here,, There,, and Everywhere, Here, There, and Everywhere"
var linkArr = data.hyperlinkfieldname.replace(/,,/g, '%2C').split(', '); 

item.linkUrl = linkArr[0]; 
// Value: 'https://www.google.com/search?q=Here%2C There%2C and Everywhere' 

item.linkDesc = linkArr.slice(1).join(', '); 
// Value: 'Here, There, and Everywhere'

Basically we join the array back together after the first element, and that represents the Description portion of the string SharePoint returns.

If you want to make it into a helper function, it would look like this:

// Used to parse "http://url/path, Link Description" value
// into an Object with Url and Description properties
BuildLinkObjFromHyperlinkField = function (hyperlinkFieldString){
    var linkArr = hyperlinkFieldString.replace(/,,/g, '%2C').split(', '); 

    return item = {
        Url : linkArr[0],
        Description : linkArr.slice(1).join(', ')
    }
}