我可以使用 JavaScript 将 HTML 评论转换为实际的 HTML 吗？

Question

如果我在文档片段中插入注释节点，我可以稍后将其转换为HTML吗？示例：

var fragment = document.createDocumentFragment();
var comment = document.createComment('<div>Testing</div>');

fragment.appendChild(comment);

// Convert comment into actual HTML?

片段内部的样子：

<!--<div>Testing</div>-->

完成后应该如何处理（实际 DOM）：

<div>Testing</div>

背景：

将 HTML 插入片段有很多限制。片段不支持 innerHTML 或 insertAdjacentHTML 等。还有其他方法可以将 HTML 放入片段中，但它们会删除某些元素并仅保留内部文本。例如，使用 createRange API 创建一个片段会删除这些类型的节点，我将留下一个只有文本节点 "Data"

的片段

var fragment = document.createRange().createContextualFragment('<td>Data</td>');

希望是，如果我可以将评论转换为实际的 DOM，它将按预期工作。

Answer 1

像这样就可以了

 var element = document.getElementById("whatever"); // get the parent element
 var comment = element.innerHTML; // get the thml
 var html = comment.replace("<!--", "").replace("-->", ""); // remove the comment
 element.innerHTML = html;

Answer 2

听起来您的潜在问题是您需要将 HTML 文本填充到 DocumentFragment 中，因此这里有一个辅助函数可以帮您完成此操作。

var container = document.createElement('div')

function createFragmentWithHTML (html, doc) {
  var result = (doc || document).createDocumentFragment()
  container.innerHTML = html
  while (container.firstChild) result.appendChild(container.firstChild)
  return result
}


var fragment = createFragmentWithHTML('<div>Testing</div><p><strong>More text</strong></p>')

// do whatever you want with `fragment`
document.body.appendChild(fragment)

Answer 3

HTML 评论的文本内容可以通过 Node interface or the data property of the CharacterData interface that the HTML Comment 接口的 nodeValue 属性访问：

<!--<div>Example</div>-->

var code = comment.data; /* Now contains `<div>Example</div>` text */
var code = comment.nodeValue; // Same result.

顺便说一下，我有一篇博客 post 关于使用 HTML 评论作为数据容器。

Answer 4

对于整个 body，您可以使用该片段：

 var body = document.getElementsByTagName('body')[0],
    bodyHtml = body.innerHTML;
 while (bodyHtml.indexOf("<!--") !== -1) { // will replace all the comments with empty string
    bodyHtml = bodyHtml.replace("<!--", "").replace("-->", ""); 
 }
 body.innerHTML = bodyHtml;

Hello
<h1>hi</h1>

<!--<div>Testing</div>-->
<!--<div>Testing</div>-->

Answer 5

你可以用element.childNodes方法获取你的评论，然后用textContent方法获取评论内容，然后用innerHTML方法把它变成HTML元素，然后去掉注释节点，替换为元素节点。

parseComments('container');

function parseComments(getContainerId){
 var container = document.getElementById(getContainerId);
 var nodes = container.childNodes;
 for(var i=0;i<nodes.length;i++){
  if(nodes[i].nodeType===8){
   var virtualCont = document.createElement('DIV');
   var getContent = nodes[i].textContent;
   virtualCont.innerHTML = getContent;
   container.removeChild(nodes[i]);
   if(nodes[i+1]){
    container.insertBefore(virtualCont.children[0],nodes[i+1]);
   } else {
    container.appendChild(virtualCont.children[0]);
   }
  }
 }
}

<div id="container">
  <h1>some header A</h1>
  <!--<p>some hidden content A</p>-->
  <p>some content</p>
  <!--<p>some hidden content B</p>-->
  <p>another content</p>
  <!--<h1>some hidden header B</h1>-->
  <!--<p>another hidden content C</p>-->
</div>

我可以使用 JavaScript 将 HTML 评论转换为实际的 HTML 吗？

Can I convert an HTML comment to actual HTML using JavaScript?

javascript

html

documentfragment