Actually I have a strange requirement. Here I have HTML code and I have to pass this code into document.write function. To achieve that I should make that code into javascript variable and pass that code to document.write. Let me explain it with an example. Say if we have the below HTML code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Then the equivalent JavaScript variable is as follows
var myVariable = '<!DOCTYPE html>\n<html>\n<head>\n<title>Page Title<\/title>\n<\/head>\n<body>\n\n<h1>This is a Heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html>\n';
So that we can use this variable in document.write function as follows
<!DOCTYPE html>
<html>
<body>
<script>
var myVariable = '<!DOCTYPE html>\n<html>\n<head>\n<title>Page Title<\/title>\n<\/head>\n<body>\n\n<h1>This is a Heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html>\n';
document.write(myVariable);
</script>
</body>
</html>
Indeed, to get the JavaScript variable I am using on-line conversion tool. But, I decided to convert my HTML code to sting manually. So I would like to know how we can do it in JavaScript or any other language. Actually I am a Ruby on Rails developer so I wonder that there is an easy way to do it manually in ruby.
Actually I have a strange requirement. Here I have HTML code and I have to pass this code into document.write function. To achieve that I should make that code into javascript variable and pass that code to document.write. Let me explain it with an example. Say if we have the below HTML code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Then the equivalent JavaScript variable is as follows
var myVariable = '<!DOCTYPE html>\n<html>\n<head>\n<title>Page Title<\/title>\n<\/head>\n<body>\n\n<h1>This is a Heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html>\n';
So that we can use this variable in document.write function as follows
<!DOCTYPE html>
<html>
<body>
<script>
var myVariable = '<!DOCTYPE html>\n<html>\n<head>\n<title>Page Title<\/title>\n<\/head>\n<body>\n\n<h1>This is a Heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html>\n';
document.write(myVariable);
</script>
</body>
</html>
Indeed, to get the JavaScript variable I am using on-line conversion tool. But, I decided to convert my HTML code to sting manually. So I would like to know how we can do it in JavaScript or any other language. Actually I am a Ruby on Rails developer so I wonder that there is an easy way to do it manually in ruby.
Share Improve this question edited Oct 29, 2015 at 8:39 pramod asked Oct 29, 2015 at 8:31 pramodpramod 2,3181 gold badge19 silver badges22 bronze badges 7- Define "not working as expected" – Sergio Tulentsev Commented Oct 29, 2015 at 8:32
- Modified Please check it once – pramod Commented Oct 29, 2015 at 8:40
- Now not sure what the question is. HTML is a string (textual data, at least). – Sergio Tulentsev Commented Oct 29, 2015 at 8:44
- have to make it as JS object – pramod Commented Oct 29, 2015 at 8:46
- So, what's the problem with that? – Sergio Tulentsev Commented Oct 29, 2015 at 8:51
3 Answers
Reset to default 4Method 1 Remove the line breaks, making the entire string a single line
var lines = '<div id="jwplayer"><center>...</center></div>';
document.write(lines);
Method 2 Escape the line breaks with backslashes.
var lines = '<div id="jwplayer">\
<center>\
...\
</center>\
</div>';
document.write(lines);
Method 3: Concatenate the string a line at a time
var lines = '<div id="jwplayer">';
lines += '<center>';
lines += '...';
lines += '</center>';
lines += '</div>';
document.write(lines);
Method 4 : Create an array strings and join them
var lines = [
'<div id="jwplayer">',
'<center>',
'...',
'</center>',
'</div>'].join(' ');
document.write(lines);
Source : Javascript document.write('HTML CODE HERE') and using a var grabbed by flash
This will take the input from a textarea and create the variable code. It escapes backslashes and quotes as needed:
function makeVariable() {
var code= document.getElementById('input').value.trim(),
output= document.getElementById('output');
output.textContent= 'var myVariable= "'+
code.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/[\n\r]/g, '\\n')+
'";';
}
document.querySelector('button').addEventListener('click', makeVariable);
function makeVariable() {
var code= document.getElementById('input').value.trim(),
output= document.getElementById('output');
output.textContent= 'var myVariable= "'+
code.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/[\n\r]/g, '\\n')+
'";';
}textarea {
height: 20em;
width: 100%;
}
pre {
white-space: pre-wrap;
background: #246;
color: white;
padding: 0.2em;
}<button>Create variable</button>
<pre id="output"></pre>
<textarea id="input">
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 class="header">This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This has a backslash \.</p>
</body>
</html>
</textarea>If I'm right in assuming you want to generate "encoded" HTML through JS, this resource seems to answer the question:
function OuterHTML(element) {
var container = document.createElement("div");
container.appendChild(element.cloneNode(true));
return container.innerHTML;
}
function encodeMyHtml(html) {
encodedHtml = escape(html);
encodedHtml = encodedHtml.replace(/\//g,"%2F");
encodedHtml = encodedHtml.replace(/\?/g,"%3F");
encodedHtml = encodedHtml.replace(/=/g,"%3D");
encodedHtml = encodedHtml.replace(/&/g,"%26");
encodedHtml = encodedHtml.replace(/@/g,"%40");
return encodedHtml;
}
So you'd be able to call (referencing this answer):
div = document.getElementById('jwplayer');
encoded = encodeMyHtml(div);
Here's a JSFiddle for you: http://jsfiddle/m8uyhz26/2/
If you want to return properly formatted HTML, use unescape with the returned data from encodeMyHtml
The main issue you have is lack of context in your question. If you gave people a reason why you need to convert HTML or JS etc, you'd be able to receive better answers.
As it stands, you'll get a bunch of JS hacks explaining how to turn HTML into JS-encoded strings etc.