Unable to build a link for my discussions inside my Display Template if the Path contain ' or ""

Question

I am working on a custom Display Template inside my content search web part. Now the Display Template build a URL for the items , as follow:-

<mso:ManagedPropertyMapping msdt:dt="string">'Link URL':'Path'...</mso:ManagedPropertyMapping>

var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);

here is how the link is being created inside the display template:-

String.format("<a href='{0}' class='ms-listlink'>{1}</a>", linkURL, property)

now i am facing a problem when building links for my discussion items, since the discussion Path include the discussion item tile (not the item Id as in the issue tracking list for example), so if the discussion title contain ' or " as in these examples :-

Customers' feedback

OR

we are planing to "Do the following"

then the generated link will truncate the title and i will get the following inside the href:-

  <a href="Customers">

and

  <a href="we are planing to"> 

so i am not sure how i can overcome this ? seems if the linkURL variable inside my display templete contain ' or " then the href will reach its end at that point, which causes the link href to be truncated if the correct href contain ' or "..

EDIT now i have noted something is that when i remove the following line of code from my display templete

linkURL.overrideValueRenderer($urlHtmlEncode);

i got my above 2 urls being rendered correctly.. but the logic says that i need this function linkURL.overrideValueRenderer($urlHtmlEncode); to get my url working well .but seems in my case using this function will cause the problem inside my above 2 urls..

so not sure what is going on ?

Answer 1

linkURL.overrideValueRenderer($urlHtmlEncode); is a function processing your HTML,
if you provide it incorrect HTML it will NOT fix it.

When creating HTML and/or Links with JavaScript you have to take two types of encoding into account:

• HTML encoding
• URI encoding

Disclaimer:

Single vs. Double quotes in HTML or JavaScript is an endless debate,

The W3C specification allows for both single quote and double quote notation for HTML attributes

And Google advices Double Quotes for Attributes

I write about HTML encoding in detail because that explains the WHY of your error and applies to all HTML attributes

Your problem can simply be solved with URI encoding, because you create an HREF attribute

HTML encoding: Browsers and quotes

When you look in the Browser source:

HTML attribute values are always double quoted, the Browser processes any HTML you provide and converts it to double-quotes

So if you create HTML code like:

<a href='http://365coach.nl'>365Coach</a>
<a href=http://365coach.nl>365Coach</a>

They will all end up in the Browser as:

<a href="http://365coach.nl">365Coach</a>

Spaces

Quotes are only required when the attribute value contains spaces, as the browser stops processing (one value) if it encounters a space or a quote (matching the single OR double that was used to start/open the value string)

The IMG alt attribute is the easiest way to show the effect:

That means

 document.write('<img alt=Hello World >')

Will end up in the Browser as:

 <img alt="Hello" World>

cleaner HTML string in your JavaScript code

You now understand you not have to write:

 document.write('<DIV class="ms-Grid-row"  style="color:red">');

But can write:

 document.write('<DIV class=ms-Grid-row  style=color:red>');

But be careful when working in a team, most developers are not used to this notation.

Quote clash

Problems arise because we tend to use double quotes for our JavaScript strings as well

 document.write("<img alt="Customer's Choice" >") // JavaScript error

So you need to escape JavaScript strings properly with a backslash:

 document.write("<img alt=\"Customer's Choice\" >")

Output:

 <img alt="Customer's Choice">

Note that

 document.write("<img alt='Customer\'s Choice' >")

Will not work because the \' is the JavaScript escape notation,
you are still providing the string 'Customer's Choice' to the Browser
So the output is:

 <img alt="Customer" s Choice>

The Browser also has escape notations

" and " are the HTML escape notations for a double quote

' (no named escape) is the HTML escape notations for a single quote

So a valid statement is:

 document.write("<img alt='Customer&#39;s Choice' >")

You can also escape that space character with   and make the alt attribute one string without spaces,
and have the Browser add those missing double-qoutes:

 document.write("<img alt=Customer's&#32;Choice >")

BOTH will output:

<img alt="Customer's Choice">

Be aware that HTML is processed character by character

So

document.write("<img alt=&#34;Customer's Choice&#34;>")

outputs:

<img alt=""Customer's" Choice&#34;>

• Because the first character & is not a quote
• The attribute value ends at the space
• Choice" is now considered an HTML attribute name and not a value (with encoding)

HTML/URI encoding with JavaScript

There is no JavaScript function to sanitize Strings into HTML encoded strings, you have to proces strings yourself:

function encodeHTML(str){
  str=str.replace(/'/g,""");
  str=str.replace(/"/g,"'");
  str=str.replace(/ /g," ");
  return str;
}

var blogtitle="Customer's Choice:\"apples\"";
var link="http://sharepoint/blog.aspx?"+encodeHTML(blogtitle);
var html="<A href="+link+">";
html+=blogtitle;
html+="</A>";
document.write(html);

outputs correct HTML:

Also note that the Browser encodes the HREF to a proper URI for you:

So you do not have to use the (standard) JavaScript encodeURIComponent( ) function

If you only care about the HREF attribute you could also only encode that URI:

var blogtitle="Customer's Choice:\"apples\"";
var link="http://sharepoint/blog.aspx?"+encodeURIComponent(blogtitle);
var html="<A href="+link+">";
html+=blogtitle;
html+="</A>";
document.write(html);

There are subtle differences on using ? , & in URLs:

• encodeURI
• encodeURIComponent

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Answer 2

Try the code as below:

var linkURL = $getItemValue(ctx, "Link URL");
linkURL = encodeURIComponent(linkURL);

Instead of the OOTB linkURL.overrideValueRenderer($urlHtmlEncode) method, you use the builtin javascript method to encode the url.

It looks like the overrideValueRenderer is trimming and formatting the value of the url.

encodeURIComponent