We Keep Coding

How do you achieve this kind of HTML escaping/encoding automaticly

I am working on a custom plugin for esri web-app builder and I noticed two things in their dojo widget that I cannot really understand.
there is a cahce property that has a lot of function under it and also this kind fo property "url:widgets/PrintAndShare/templates/Print.html" which is legal by JS, but why using that instead of the standard dojo/text!.template, I see that the template itself is still loaded ( but ignored) - so the question is -how exactly that cached property works.
the main question is - these properties have html encoded in very specific way for example
<div class="gis_PrintDijit">
encoded like this
\x3cdiv class\x3d"gis_PrintDijit"\x3e\r\n
how do I achieve this kind of encoding ? with online tools or even better with some automation, for now I just use manual char replacing but it is really not efficient.
Thanks you all

I do not know if there is a better way.
A simple workaround can be to use encodeURIComponent and then a replace:
var t = "<div>test ok: 100%</div>";
console.log(encodeURIComponent(t).replace(/%/g,"\\x"));

Using HTML within a JSON Object

I'm working on an FAQ type project using AngularJS. I have a number of questions and answers I need to import into the page and thought it would be a good idea to use a service/directive to load the content in dynamically from JSON.
The text strings are quite unwieldily (639+ characters) and the overall hesitation I have is adding HTML into the JSON object to format the text (Line breaks etc).
Is pulling HTML from JSON considered bad practice practice, and is there a better way to solve this? I'd prefer to avoid using multiple templates but it's starting to seem like a better approach.
Thanks

If you're using AngularJS and already have a build step, html2js could help you with turning HTML templates into JS, which can then be concat'd and minified.

You could try parsing the incoming JSON before sending it to the page and just adding in a <br /> everywhere you run into a \n. That way the JSON is more universally usable if you ever decide you want to port the data to another medium.

Output script tags without jQuery, avoiding execution

I have JS calling remote server through AJAX. The response contains something similar to this
<script>alert(document.getElementById('some_generated_id').innerHTML; ... </script>
User copies the response and uses for own purposes. Now I need to make sure that not a single browser runs the code when I do this:
var response = '<scrip.....';
document.getElementById('output_box').innerHTML = response;
Same should apply to any HTML tags. I know that .text() from jQuery will do exactly what I need:
var response = '<scrip.....';
$('#output_box').text(response);
I am looking for any solutions, including, but not limited to: escaping special characters, however displaying them correctly; adding zero-width space to tags (has to be efficient); outputting in parts. Has to be pure JS.

If you're using a server-side language there is probably a method to escape special characters.
In PHP you could use htmlspecialchars(), it will convert certain characters that have significance in HTML to HTML entities (i.e. & to &).
They will still display correctly and you'll be able to copy and paste the text, but the javascript shouldn't run.
If you need a pure javascript solution for this, someone has answered that here https://stackoverflow.com/a/4835406/15000

Using text/html javascript templates in production code

Has anyone implemented John Resig's micro-templating in production code? In particular I'd like to know if embedding the templates with <script type="text/html"> has caused any problems.
A bit more information: here's the sort of thing I'm worried about:
My users are mostly in corporate environments - could an unusual proxy server mangle or strip out the templates
The embedded templates seem to fail W3C validation. What if, for instance, the next version of IE decides it doesn't like them?

I abandoned inlining templates through scripttags as my view layer would create redundant duplicate script templates. Instead I placed the templates back into the JavaScript as string:
var tpl = ''.concat(
'<div class="person">',
'<span class="name">${name}</span>',
'<span class="lastname">${lastName}</span>',
'</div>'
);
I used the string concat trick so I could make the template string readable. There are variations to the trick like an array join or simply additive concatenation. In any case, inline script templates works and works well, but in a php/jsp/asp view layer, chances are you will create redundant duplicate script templates unless you do even more work to avoid it.
Furthermore, these templates become rather complex the more logic you have to add to them, so I looked further and found mustache.js which imo. is far superior and keeps the logic (conditions and dynamic variable definitions) in the JavaScript scope.
Another option would be to retreive template strings through ajax, in which case you can put each template inside it's own file and simply grant it a .tpl extention. The only thing you have to worry about is the http request roundtrip, which should not take too long for small .tpl files and is imo. insignificant enough.

While I haven't used #jeresig's micro-templating, I did roll my own which uses <script type="text/html">. I've used it in a couple of (albeit basic) production sites without problems. The HTML5 spec itself refers to something similar (near the end of the section I've linked to). AFAIK the block only executes when the MIME type is a recognized script type, otherwise the block is just part of the document.

I have actually, and it works great. Though only for webkit powered browsers so can't vouch for others. But what problems are you expecting? The approach is simple and I can't think of how it might break.

If you're using jQuery I can recommend jQuery templates instead:
http://github.com/nje/jquery-tmpl
I think it's supposed to be introduced officially in jQuery 1.5
BTW. I think both Resigs script and jQuery templates relies on using innerHTML, so as long as that works in your browser you should be OK.

Javascript XML parsing or alternative

I'm building a Javascript preview function for a blog back-end (much like the one used on this website), and I'd like to be able to parse some custom tags that normally get parsed by PHP. I am wondering if it's possible to use the JS XML parser to parse content from a textarea that would look like:
<img=1>
Use for
<url=http://apwit.com>testing</url>
purposes only!
I read on another question here once that using regex to parse things like this is a bad idea because of the many many exceptions there could be. What do you think?

Use this: http://www.w3schools.com/Xml/tryit.asp?filename=tryxml_parsertest2
It parses xml from a string and uses the fast native XML parsing engine from the browser.
Explanation and discussion:
http://www.w3schools.com/Xml/xml_parser.asp