将HTML代码转换为Javascript变量（字符串）

Question

其实我有一个奇怪的要求。 这里我有HTML代码，我必须将此代码传递给document.write函数。 为了实现这一点，我应该将该代码转换为javascript变量并将该代码传递给document.write。 让我用一个例子解释一下。 假如我们有以下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>

然后等效的JavaScript变量如下

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函数中使用这个变量，如下所示

<!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变量，我使用的是在线转换工具。 但是，我决定手动将我的HTML代码转换为sting。 所以我想知道我们如何用JavaScript或任何其他语言来做到这一点。 实际上我是Ruby on Rails开发人员，所以我想知道有一种简单的方法可以在ruby中手动完成。

Answer 1

这将从textarea获取输入并创建变量代码。 它根据需要转义反斜杠和引号：

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>

Answer 2

方法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'）并使用flash抓取的var

Answer 3

如果我认为你想通过JS生成“编码”HTML，那么这个资源似乎回答了这个问题：

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

您遇到的主要问题是您的问题缺乏背景。 如果你给人们一个你需要转换HTML或JS等的原因，那么你将能够得到更好的答案。

就目前而言，您将获得一堆JS黑客，解释如何将HTML转换为JS编码的字符串等。

将HTML代码转换为Javascript变量（字符串）

问题描述

3 个解决方案

解决方案1
4 2015-10-29 10:49:10

解决方案2
2 2015-10-29 09:00:09

解决方案3
0 2015-10-29 10:38:33

将HTML代码转换为Javascript变量（字符串）

问题描述

3 个解决方案

解决方案1 4 2015-10-29 10:49:10

解决方案2 2 2015-10-29 09:00:09

解决方案3 0 2015-10-29 10:38:33

解决方案1
4 2015-10-29 10:49:10

解决方案2
2 2015-10-29 09:00:09

解决方案3
0 2015-10-29 10:38:33