How to convert html to javascript string markup - javascript

Is there an easy way to convert HTML to a string that I can use in Javascript code, in order to insert a piece of html in a code editor?
example HTML:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Title</h1>
<h2>Subtitle</h2>
<p>Some text goes here</p>
</body>
</html>
Becomes This:
<html>\n\n\t<head>\n\t\t <title>Hello World</title>\n \t</head>\n\n \t<body>\n \t\t<h1>Title</h1>\n \t\t\t<h2>Subtitle</h2>\n \t\t\t\t<p>Some text goes here</p>\n \t</body>\n\n </html>\n
But how do I automate the process, because bigger HTML files will be hard to convert them like this by hand. Is there an easy converter available?
So in essence: Can I convert HTML code to a single line, where new lines + tabs are preserved with \n and \t ?

The editor that you are copying from appears to be inserting special characters for new lines and tabs.
You could always use a minifier like this one:
http://www.willpeavy.com/minifier/

You would need to just convert the text into JSON. Line breaks, quotes, special characters, etc., would all be escaped for you.
Use whatever language and environment you're comfortable with - pretty much any language will have a JSON serializer.
For example, in C# and ASP.NET MVC:
string html = File.ReadAllText(#"C:\myfile.html");
string json = JsonConvert.SerializeObject(html);
The variable json now can be safely injected into a webpage, and it will include the necessary quotes and special escape characters:
var someText = #Html.Raw(json);

Related

Why are my special characters '>>' being replaced with diamonds with question marks?

here are the two lines of code in which I'm printing the special characters '>' and '>>'. however, they are being displayed as diamonds w question marks on the webpage.
paginationHtml = paginationHtml+\"<a href='javascript:void(0)' onclick='getCommentList(\"+next_page+\")'>Next› </a>&nbsp\";
paginationHtml = paginationHtml+\"<a href='javascript:void(0)' onclick='getCommentList(\"+page_count+\")'>Last» </a>&nbsp\";
Make sure your html file is saved in the same format you declare in the head section. If for instance your file is utf-8 encoded, put this in your html:
<head>
<meta charset="UTF-8">
</head>
If you use ansi encoding, then
<head>
<meta charset="ISO-8859-8">
</head>
... etc, but it should correspond. If you have the choice for your file encoding, go for utf-8.
To display special characters like › & », your simplest solution is to save and display all your documents in UTF-8.
3 Steps:
1. In your root .htaccess file, specify
AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js
2. At the top of your .html document, just below <head>, add
<meta charset="utf-8">
3. Importantly, make sure that you are saving any documents from your text editor with UTF-8 encoding.
The problem was I needed to change the encoding of my file. In PHPStorm, go to 'File' then 'File Encoding'. For me, I needed to choose 'UTF-8' encoding. I converted the code and now the ">>" characters show up fine in the website!

Get script's own source from Greasemonkey script

I know that with basic JS you can read a <script>'s source code like so:
<pre id="scriptContents"></pre>
<script id="myScript" type="text/javascript">
var script = document.getElementById('myScript');
var contents = script.innerHTML;
scriptContents.innerText = contents;
</script>
So my question is: Is there any way similar to this in Greasemonkey/Tampermonkey? I want to be able to read the Greasmonkey script's source code as string.
The reason I'm asking is because the Greasemonkey script is magically included to the page and doesn't have a "physical" representation like the above <script> block.
More background: I'm writing a script but it needs a lot of styles and also a Mustache template which is really hard to provide in JavaScript in a readable form. I want to prevent having the escape every single apostrophe or quote character and also joining the string or adding \ at the end of the line. I found a tricky way to do this, but still looking for alternatives. Here's the current version:
function hereDoc(f) { return f.toString().replace(/^[^\/]*\/\*!/, '').replace(/\*\/[^\/]*$/, ''); }
$('head').append(hereDoc(function() {/*!
<script id="template" type="x-tmpl-mustache">
<div>...
</script>
<style type="text/css">
lots.of #css { code: here; }
</style>
*/}));

How to put "</script>" in a javascript string?

I've been trying some tricks in javascript and came to a ridiculous problem: I can't use <script> as a substring in a javascript string! Here is an example:
<html>
<head>
<script>
alert("<script></script>");
</script>
</head>
</html>
It supposed to print out <script></script>, but instead, I get this:
");
Printed out on the page, as HTML.
Question: How can I use <script> followed by </script> substrings in Javascript, and why is it acting that way?
Here is JSFiddle of it.
What's tripping you up is the </script>. The HTML parser doesn't recognize Javascript strings or nested <script> tags, so it's interpreting that as the closing tag for the initial <script>. That is, this part of the document is parsed as:
<script> (open tag)
alert("<script> (text node - contents of the script)
</script> (close tag)
"); (text node - plain text)
The second </script> is ignored, as there's no other <script> tag for it to close.
To work around this, break up </script so that the HTML parser doesn't see it. For instance:
alert("<script><\/script>");
or:
alert("<script><" + "/script>");
or just put the code in an external Javascript file. This issue only arises for inline scripts.
it is because of the \ I believe. i have no concrete explanation since I am a newbie to Javascript but this code should work:
alert("<script><\/script>");
came up with it using Java knowledge.. Haha since the \ is an escape key in many languages.
Alert(\<script>\</script>\)

Pound (£) and euro (€) signs encoded wrong in external JavaScript file

I'm trying to encode the £ sign in an external JS file but I keep getting '%EF%BF%BD'. Here's the code in its simplicity:
alert(encodeURIComponent("£"));
The same alert gives me '%C2%A3' on the HTML page that is calling the external JavaScript file. The HTML page has the following character set:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
And I've defined the character set for the external JS file too:
<script type="text/javascript" src="/js/share.js" charset="utf-8"></script>
How can I force the external JavaScript file use UTF-8 encoding?
Fixed the problem by creating a blank JS file with UTF-8 encoding, copying the code in from the original file and replacing the old file with the new file.
ef bf bd is the replacement character - what a browser uses if it does not have the given character in its font.
If it renders correctly here, it looks like this: �
My guess would be that whatever font you're using does not support the British pound symbol £
Could you add a link to the page you're using or a demo?
Use UTF encoded character
alert("\u00A3");
On jsfiddle
UPDATE: I am still unsure as to what your problem is, but here is a further example.
HTML
<div id="out"></div>
Javascript
var link = "http://somewhere.com",
tweet = "£££££€€€€€€€",
x = 'anchor';
document.getElementById("out").innerHTML = x;
alert(decodeURIComponent(x));
On jsfiddle
As I suggested in the comments, you should construct a jsfiddle to demonstrate the issue you are having if the above is not the solution that you are looking for.

How can I read a JSON in the script-tag from JavaScript?

I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a parameter. I have seen this approach used by Google (see Google's +1 Button: How do they do it?).
But how should I read the JSON string from the JavaScript?
<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
<script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
</head>
<body>
Hello
</body>
</html>
In this JavaScript I would like to use the JSON argument {"org": 10, "items":["one","two"]} from the HTML document. I don't know if it's best to do it with jQuery or without.
$(function() {
// read JSON
alert("the json is:")
})
I would change the script declaration to this:
<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>
Note type and id fields. After that
var data = JSON.parse(document.getElementById('data').textContent);
will work just fine in all browsers.
The type="application/json" is needed to prevent browser from parsing it while loading.
And the reason why we use textContent instead of innerHTML or innerText to read the raw Json text is because innerHTML tries to parse the contents as HTML which will lead to slower performance and possible parsing bugs and XSS attacks, and innerText won't grab the raw text and will instead look for human-visible text, whereas textContent grabs the pure text as-is (which is what you want). See https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent for more details about why innerHTML and innerText are bad.
I ended up with this JavaScript code to be independent of jQuery.
var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);
To read JSON in <script id="myJSON"> use
var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON
You can also use methods to point to the script like document.scripts[0]
//var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
{"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>
JSON.parse($('script[src="mysript.js"]').html());
or invent some other method to identify the script.
Maybe instead of .html() you might need .text(). Not sure. Try them both.

Categories