Decode (or encode) "&_amp_;" in html string?

Hello Outsystems forums,

I want to ask about decode (or probably encode)  "& amp ;"  symbol in converted HTML URL.

I've been using these two extensions but seems like it failed to convert   "& amp ;"   into  "&"  symbol..



is there any other methods on how to convert the  "&_amp_;"  characters? or perhaps I just implemented it wrong?

Solution

Here it is an example using the OutSystems built-in functions:

regextext.oml

mvp_badge
MVP

Hi Aditya,

Isn't it just failing because it should be & and not & amp; 

I believe the space after the & doesn't belong there.

For more information see: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html

Regards,

Daniel

Hello Daniel, thank you for your response.

I'm not sure I follow, is what you mean that the  "& amp ;"  is an escape string?

In my case, I want to convert or maybe replace this characters into  "&"  symbol:

Above is a response from REST API that appeared with "& amp" characters I've mentioned, and because of that it failed to represent an image in HTML render tag

mvp_badge
MVP

The escape string for & is &; not & amp;

there should not be a space between & and amp;

Indeed there is no space between and amp; inside the API response:

is it possible to convert/replace the response that contains "ampersand" characters into symbol?

mvp_badge
MVP

If your encoded URL contains & it will be succesfully decoded to &

& amp; cannot be succesfully decoced, unless you first remove the space after the &

Hello Daniël,

I try to decide to replace the Ampersand characters inside the string value, but I don't want to replace the whole parameter outside the <img source> tag. This is the example string I've shown you before: 

Is it possible to replace within condition like that? Maybe I need to use Regex_Replace? but I'm not familiar with regex pattern though

Champion

HI Aditya

Daniël  is right. The value "&_amp_;"  is invalid.

If only this one causes trouble, maybe you can consider using regex_replace action.

Kind  Regards,

I see, so basically the appearance of "Ampersands" characters inside the REST API response is invalid?

Alright, and what should I put inside the Pattern parameter? The "& amp" one?


Champion

Yes, You can use "& amp". But I suggest using regex_replace because it can deal with more complicated problems.

 If you are not familiar with Regex Expression, and only want to replace "& amp ", You can use more simple action. e.g.  Replace("& amp "," )

Kind Regards

If I decide to use the simple Replace built-in function, turns out it will replaced the whole API response, which is not good.

I think I preferred the Regex one, maybe you could tell me how to use the pattern expression?

So the text that needs to be replaced is always inside <img source> tag, example:


<img src="__  _(url value)_______& amp;_____ (url value)______.JPG">


and there's the "Ampersand" characters in the middle that need to be replaced into %26 in order the render HTML to work.

mvp_badge
MVP

Could you share the complete url that you need to decode? Because I still don't understand why you have an issue at all. It should be easy.


Hello Daniel,

So as I've mentioned we got a response parameter from an API, and we already have decode the parameter value using this extension:


It works, but we're using this parameter value to be rendered as HTML tag, and in order to render an image inside HTML tag the URL cannot consists of Ampersand character, it needs to be replaced as %26. Therefore, I want to try using Regex because I think the replacement condition quite difficult since the URL text is inside an attribute/parameter.

I can give you an example of the parameter format after decodeURL action:

"detail": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. & Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<img src="/content/dam/p&t/2019/juli/Telkomsel%20Gelar%20Hackathon%20Innovate%202019_2.JPG" style="font-size: 0.8125rem;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore & et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  

<img src="/content/dam/p&t/2019/juli/Telkomsel%20Gelar%20Hackathon%20Innovate%202019_4.JPG" style="font-size: 0.8125rem;>" </p>"

I'm also give you the sample as an image in case the Ampersands characters are converted automatically in OS forums editor:


Thank you

mvp_badge
MVP

Looks like your issue is that you decode HTML using URL_Decode, where instead you should use HTML_Decode that is available as an action of the EncodingUtils extension available on the Forge:

https://www.outsystems.com/forge/component-overview/3892/encoding-utils


Regards,

Daniel

Thanks for your recommendation,

I tried with that extension the decoding also works as well. However, this doesn't fix our case because the issue were about the URL inside the img src tag is containing Ampersands (&-amp-;) character so it won't render the image.

Example, the html text value that doesn't render the image properly:

The html value that does render the image properly:


I wanted to replace the Ampersand character inside the img src tag to %26, but I don't want to replace the character outside the tag. I find it difficult if using simple Replace built-in function because the text value is in one attribute and turns out it replaced the all Ampersand strings in the attribute value.

Perhaps it can be resolved with regex function?

Hi, ,

I have made a javascript regex that gets the image SRC and then replaces the Ampersand. It will garantee that the replacement happens only inside a SRC attribute. 

function ampersandDecode(str) {
  var rgx1 = new RegExp(/src=\"(.*?)\"/g);
  var imgSource = rgx1.exec(str)[1];

  alert(imgSource);
  alert(imgSource.replace("&-amp-;", "%26"));
}

ampersandDecode("<img asdfasf src=\"/content/dam/p & t/2019/juli/Telkomsel Gelar Hackathon Innovate 2019_4.JPG\" dfsasd f>");

Hope it helps.

Solution

Here it is an example using the OutSystems built-in functions:

regextext.oml

Hello, Kadu

Thank you for your solutions! I'll try the regex one first because the JS only available on the front-end side.

I'll update this post once it's solved.

Hi Aditya Eka Prabowo,

"&" points to a character reference in HTML URL, e.g. "<" = < or ">" >. So, to put an "&" in the string, you must "scape" it in order to not introduce a character, so you use  &

In other words, for some reason, the code that is generating the URL that you are using in the img tag is interpreting the "&" as a character text of the String and not a part of the URL.

If you could enconde it with a "%26" on the source would be a nicer move. The decode/encode URL javascript functions only works for character with the "%", i.g. "%20" for space.

Despite of that, to use the regex_replace:

Regex_Replace(TEXT,"& amp ;","&")

Hope it helps.

Best regards.

ps: "& amp ;" only have the spaces in order to be printed ... I think you know why.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.