Question

我正在尝试编写自己的Javascript，将html转换为ascii代码（用于学习目的），以便浏览器呈现代码，就像在文本编辑器中看到的一样。

在Stack上四处看看后，我已经到了下面。我试图将一个html元素变成一个字符串;在这个阶段，我只是试图将.replace()角括号变成ascii。如果我的测试<body>标签显示在控制台中，那么任何人都可以告诉我哪里出错了。

<code class="lang-html">
  <body></body>
</code>

(function() {
  var html = $('.lang-html').innerHTML;
  html.replace('<', '&lt;');
  html.replace('>', '&gt;');
  console.log(html);
});

为了澄清，我希望控制台会吐出<body></body>。

非常感谢任何帮助。

Answer 1

一些事情：

$('.lang-html').innerHTML

假设这是jQuery，这不会起作用。 .innerHTML仅适用于原始DOM元素，例如document.getElementById(...)返回的内容。相反，$('.lang-html')返回 jQuery集合，它有自己的访问器方法。你应该这样做：

$('.lang-html').html() // get the HTML as text from this element

继续，.replace()不会修改原始字符串。它返回一个新副本。在最简单的情况下，您可以这样做：

var html = $('.lang-html')
    .html()
    .replace('<', '&lt;')
    .replace('>', '&gt;');

但您仍需将其重新分配给HTML源代码。同样，jQuery为此提供了一个简单的API。

$('.lang-html').html(html);

但是，还有一个问题。 .replace()仅替换字符串中的第一个匹配项。要替换所有这些，您需要构造一个正则表达式并使用/g（全局）标志。这是完整的代码：

var $element = $('.lang-html');

var html = $element.html()
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

$element.html(html)

Answer 2

你也可以做一个

$('.lang-html').prop("innerText")

将把你的div的内容作为真实文本提交给你。

不需要进一步翻译。

Answer 3

实际上＆lt; body＆gt; 标签不会在已发布代码的innerHTML中返回，因为HTML无效。解释：

为了满足Javascript中对DOM的更改，浏览器通过检查指定节点的子元素并从中生成HTML代码，从DOM动态创建innerHTML个字符串。

由于＆lt; body＆gt; 标记仅在主题部分后面立即生效，因此浏览器会首先通过创建正文来静默响应帖子中的＆lt; code＆gt; 标记放置它的元素。然后忽略后面的＆lt; body＆gt; 标记，因为它们在此位置无效。因此，代码节点没有body元素子元素，innerHTML中没有body标签

<小时/> 更新（2）：要在不查看页面源的情况下打印HTML，您可以尝试。

 (function() {
      var body = document.body;
      var html = body.parentNode.outerHTML;
      html = html.replace(/</g, '&lt;');
      html = html.replace(/>/g, '&gt;');
      html = html.replace(/\ /g, "&nbsp;");
      html = html.replace(/\n/g, '<br>\n');
      // console.log(html);
      body.innerHTML = html;
      body.style.fontFamily = "monospace";
});

Answer 4

如果您希望在浏览器中获得DOMElement的html代码表示，那么您将不再需要replace来转义html特殊字符。但您可以使用浏览器来处理所有边缘情况。

您可以使用innerHTML / outerHTML和textContent。

这将是例如将使用body代码表示替换html的内容。

var elm = document.getElementsByTagName('body')[0];
elm.textContent = elm.outerHTML;

或者，如果您只想将结果作为字符串但未在浏览器中显示，那么您可以将其包装到函数中：

＆＃13;

function escapeHTML(html) {
  var div = document.createElement('div');
  div.textContent = html;
  return div.innerHTML;
}

console.log( escapeHTML('<div>test</div>') );

＆＃13;

innerHTML到ascii

4 个答案: