We Keep Coding

Encoding/decoding issue of a string in HTML5

I am trying to display the below string in the HTML browser but the moment browser encounter with custom tag like "" in the string, it just skip that.
I tried encodeURIComponent() and later tried to decodeURIComponent in my HTML template but did not work.
I even tried to sanitize the HTML by creating an PIPE like below but no luck.
transform(v: string): SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
somehow, browser is skipping the the element like in the string.
following is the string
“The endpoint is browser-based, rather than RESTful. Therefore it could
result in the following different scenarios,↵1. SUCCESS
(response_type=code)↵> redirect_uri?code=<authorization-code>&scope=
<resource-owner-approved-scopes>[&state=<state-provided-by-the-client>]."

Never insert text with innerHTML; only insert HTML with innerHTML.
Browsers nowadays have a textContent property:
yourDiv.textContent = stringFromServer;
Also, just to clear up the common mistake you and many other developers make, encodeURIComponent is meant to encode a string for insertion into a URL, not insertion into HTML. Same goes with encodeURI (which you probably should never use anyway).
Update:
As stated in your comments, you're actually wanting to transform the text into HTML using some rules rather than inserting plain text into your HTML, which will do the typical whitespace normalization rules.
There are many options for this. Here are two:
Still insert just the plain text, but set the CSS style in the container to white-space: pre. This changes the way that whitespace is rendered, so newlines cause line breaks.
Split your original string, then intersperse your div with text nodes and <br/> elements.
Code for the latter could look something like this:
function insertFormattedText(container, text) {
const chunks = text.split('\n');
chunks.forEach((chunk, i) => {
container.appendChild(document.createTextNode(chunk));
if (i < chunks.length - 1) {
container.appendChild(document.createElement('br'));
// Equivalent of ` `
container.appendChild(document.createTextNode('\u00A0\u00A0'));
}
});
}

Unable to remove html tags from response JSON

Hi I am new to AngularJS. I am having a problem parsing JSON data to proper format. Actually the JSON response itself returned HTML format data (it contains HTML tags like &lt,;BR,> etc). If I check the response in browser it returns fine, but in device(TAB,MOBILE) the HTML tags are also getting appended. I am using AngularJS to bind the JSON response to DOM. Is there any way to simply ignore HTML tags in JQuery or in AngularJs? At the same time I don't want to remove the HTML tags as they are necessary to define "new line", "space", "table tag" etc.
A sample response I am getting is like:
A heavier weight, stretchy, wrinkle resistant fabric.<BR><BR>Fabric Content:<BR>100% Polyester<BR><BR>Wash Care:<BR>
If I apply the binding using {{pdp.desc}}, the HTML tags are also getting added. Is there any way to accomplish this?
I have added ng-bind-html-unsafe="pdp.desc", but still "BR" tags r coming.

useless html tags can be remove using regix expression, try this
str.replace(/<\/?[^>]+>/gi, '')

Try to use three pairs of brackets {{{pdp.desc}}} In Handlebars it works, possible in your case to.

Use JS HTML parser
var pattern = #"<(img|a)[^>]*>(?<content>[^<]*)<";
var regex = new Regex(pattern);
var m = regex.Match(sSummary);
if ( m.Success ) {
sResult = m.Groups["content"].Value;
courtesy stackoverflow.

jQuery replacing spans in node+jade combo

Perhaps this is expected, but I found it odd since I am now starting with jQuery.
So, I am writing an application using node and jade. In the index.jade I have a statement of the form
p Welcome subscriber
span(id="subscriber") someID
Now once the connection is established between the client and the server, the server sends a welcome JSON message with some data. One of them is the id of the client which I want to replace above. Once the client receives the welcome JSON message it initializes the appropriate structures and then I make a call to a function loadStats:
function loadStats() {
var myText = "" + myData.id + ".";
$('#subscriber').text(myText);
$('#subscriber').html(myText);
};
In the screen I can see that the text "someID" is replaced by the ID of the client. However, when I actually inspect the html code of the page that I am looking at I see a statement of the form:
<p>Welcome subscriber <span id="subscriber">someID</span></p>
In other words in the actual HTML code the text "someID" has not been replaced. Is this something expected? How was the replacement done? Moreover, it appears that working with either of the statements
$('#subscriber').text(myText);
$('#subscriber').html(myText);
gives the replication on the screen but not on the actual html content of what is presented on screen. Is this the correct behavior? From what I understood (and expect) the .text() replaces the visual data of the element with the specific id and the .html() replaces the content. Am I missing something?
Thanks in advance. jQuery rookie here.

Two rules for expressions in pug:
In attributes you use quotes to output literal text and you leave the quotes out when you want to use a variable, and
For the content of a tag you use an equals sign when you want pug to evaluate an expression, or don't put anything if you want literal text
So with those rules in mind, looking at your code you will output the attribute "subscriber" as a literal and "someId" as a literal.
span(id="subscriber") someID
Results in:
<span id="subscriber">someId</span>
You wanted both to be dynamic so remove the quotes in the attribute and put an equals sign after the element:
span(id= subscriber)= someID
This will dynamically replace both with variables.

Assign a HTML-entity as an attribute value using JavaScript/jQuery

I've been following this technique on css-tricks to add icons to a website: http://css-tricks.com/html-for-icon-font-usage/
I've got this in my CSS:
[data-icon]:before {
font-family: Symbol;
content: attr(data-icon);
speak: none;
}
However, part of my interface is generated using jQuery. Here's one such control:
var $control = $('<div>', {
'aria-hidden':'true'
, 'data-icon': ''
});
I have tried encoding it as \e01c, \\e01c, , you name it, I've probably tried it. The result is always the same, everything after the ampersand is rendered to the screen because the ampersand comes out as & in the source code or the backslashes show up.
I tried concatenating in the CSS content:
content: "&" attr(data-icon) ";";
and just including the number in the data but the ampersand still shows up encoded on its own.
Is there any way to encode this entity and have it output to the page correctly?

To encode codepoint 57372 in JavaScript, use '\ue01c'.
You should be aware that it won't render well, since unicode defines it as an unassigned codepoint in the private use area":
http://www.unicode.org/charts/PDF/UE000.pdf
Private Use Area
Range: E000-F8FF
The Private Use Area does not contain any character assignments, consequently no character code charts or names lists are
provided for this area.
Maybe you meant another code-point.

This is a bit hackish but should work:
'data-icon': $("<span></span>").contents().get(0).nodeValue
Demo here
It works as follows:
$("<span>&entity;</span>") creates a span element with one child of type textNode. .contents() is used to extract all children nodes including the text node, whose nodeValue is then assigned to data-icon attribute.

How to HTML encode a string in JavaScript from a Firefox extension

So I know I can write my own HTML-encoding function like this:
function getHTMLEncode(t) {
return t.toString().replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">");
}
But I was wondering if there were any native facility for this that is available to XPCOM components. I'm writing a component, not an overlay, so I don't have a DOM around to do tricks like creating a DOM element and setting its innerHTML.

The answer appears to be no - there is no built in function in Firefox to HTML-encode a string from an XPCOM component.

In theory you could create an XML document, use that to create an HTML div, set its text content to your unencoded string and read off its innerHTML. Note that this only encodes lt, gt and amp characters, not quot.