Special characters are not properly displaying on portal level.

[ar1]

Hi All, @Ankur Bawiskar 

We observed one issue on portal during the search of the catalog items..

Catalog item level we gave the short description is like below:

Request a floor plan change related to a new/additional front room

But on portal level, the special characters such as "/" are not displaying correctly.

Request a floor plan change related to a new/additional front room.



In search source we're using the below script:

<div ng-if="item.type == 'sc'" class="sc">
<a href="{{item.url}}" class="h4 text-primary m-b-sm block">
<i ng-if="item.picture" class="ta-img" style="background-image:url('{{item.picture}}?t=small')"></i>
<i ng-if="!item.picture && item.icon" class="ta-icon" style="background-image:url('{{item.icon}}'); width:16px; height:16px;margin-right:15px"></i>
<i ng-if="!item.picture && !item.icon" class="ta-icon fa fa-shopping-cart"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>

<span class="text-muted m-r-sm" ng-if="data.showPrices && item.price != '$0.00'">{{item.price}}</span>
</div>
<div ng-if="item.type == 'sc_content'">
<a ng-if="item.content_type == 'external'" ng-href="{{::item.url}}" target="_blank" class="h4 text-primary m-b-sm block"><span ng-bind-html="highlight(item.name, data.q)"></span> ➚</a>
<a ng-if="item.content_type == 'kb'" ng-href="?id=kb_article&sys_id={{::item.kb_article}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span>
</a>
<a ng-if="item.content_type == 'literal'" ng-href="?id={{item.page}}&sys_id={{item.sys_id}}" class="h4 text-primary m-b-sm block">
<i class="fa m-r-sm fa-file-text-o"></i>
<span ng-bind-html="highlight(item.name, data.q)"></span></a>
<div ng-style="getBGImage(item)" ng-if="item.picture" class="img-responsive m-r item-image pull-left"></div>
<p ng-bind-html="highlight(escapeHTML(item.short_description), escapeHTML(data.q))"></p>
<p ng-bind-html="highlight(item.catalog + ' : ' + item.breadcrumb, data.q)"></p>
</div>

Advance thanks.

[Ratnakar7 · Accepted solution]

Hi @ar1 ,

In the search source script, the short description is passed through the escapeHTML() function, which is encoding special characters as HTML entities. This is causing the "/" character to be displayed as "/" on the portal.

To fix this issue, you can try removing the escapeHTML() function from the line that displays the short description:

<p ng-bind-html="highlight(item.short_description, escapeHTML(data.q))"></p>

should be changed to

<p ng-bind-html="highlight(item.short_description, data.q)"></p>

This should prevent the special characters from being encoded as HTML entities and display them correctly on the portal.

If my response was helpful in resolving the issue, please consider accepting it as a solution by clicking on the ✅Accept solution button and giving it a thumbs up 👍. This will benefit others who may have a similar question in the future.

Thank you!

Ratnakar

[ar1]

Hi Ratnakar,

Many thanks for the response.

It's resolved our issue. But when we use the below line then it's working fine for special characters in our PDI.


Any idea why it's not working for my company portal.

<p ng-bind-html="highlight(item.short_description, escapeHTML(data.q))"></p>

Advance Thanks.

[Ratnakar7]

It might be because the AngularJS version used in the company portal might be different from the one used in the PDI.