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变量，我使用的是在线转换tool。但是，我决定手动将我的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') and using a var grabbed by flash

Answer 3

如果我正确地假设您要生成＆＃34;编码＆＃34; HTML到JS，这是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;
}

因此，您可以致电（referencing this answer）：

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

这是一个适合你的JSFiddle：http://jsfiddle.net/m8uyhz26/2/

如果您想要返回格式正确的HTML，请将unescape与encodeMyHtml

中返回的数据一起使用

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

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

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

3 个答案: