All geek questions in one place

Convert HTML code to Javascript variable (string)

Actually, I have a strange demand. Here I have the HTML code, and I have to pass this code to the document.write function. To achieve this, I have to make this javascript variable code and pass this document.write code. Let me explain this with an example. Say if we have code below HTML

<!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, we can use this variable in the 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>

, JavaScript, on-line- . HTML- sting . , JavaScript . Ruby on Rails, , .

+4
3

. :

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>
Hide result
+3

1 ,

var lines = '<div id="jwplayer"><center>...</center></div>';
document.write(lines);

2. .

var lines = '<div id="jwplayer">\
    <center>\
      ...\
    </center>\
  </div>';
document.write(lines);

3:

var lines = '<div id="jwplayer">';
lines += '<center>';
lines += '...';
lines += '</center>';
lines += '</div>';
document.write(lines);

4:

var lines = [
  '<div id="jwplayer">',
  '<center>',
  '...',
  '</center>',
  '</div>'].join(' ');
document.write(lines);

: Javascript document.write('HTML CODE HERE') var,

+1

, , "" HTML JS, :

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;
}

, ( ):

div = document.getElementById('jwplayer');
encoded = encodeMyHtml(div);

JSFiddle : http://jsfiddle.net/m8uyhz26/2/

HTML, unescape encodeMyHtml

The main question you have is the lack of context in your question. If you tell people why you need to convert HTML or JS, etc., you can get better answers.

In its current form, you will get a bunch of JS hacks explaining how to turn HTML into strings encoded in JS, etc.

0
source

Source: https://habr.com/ru/post/1613610/

More articles:


All Articles