如何使用jQuery实现已注释HTML元素的取消注释功能？

DevOps 小满

2026-5-15

解决jQuery取消HTML元素注释的问题

没问题，我来帮你搞定这个取消注释的需求！之前的comment函数把目标元素包裹进了HTML注释里，要恢复它的话，我们需要定位到对应的注释节点，提取里面的原始HTML内容，再把它重新转换成正常的DOM元素放回页面。

核心思路

定位注释节点：HTML注释的nodeType是8，我们可以遍历页面中的所有节点，筛选出包含目标元素标识（比如id）的注释节点。
清理注释内容：把注释前后的标记去掉，还要处理原comment函数里不小心多加上的末尾双引号。
恢复DOM元素：把清理后的HTML字符串转换成jQuery对象，用它替换掉原来的注释节点。

完整实现代码

<div id="div1">bar</div>
<button id="commentBtn">点击注释元素</button>
<button id="uncommentBtn">点击取消注释</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 你原有的注释函数
function comment(element){ 
  element.wrap(function() { 
    return '<!--' + this.outerHTML + '"-->'; 
  }); 
}

// 新增的取消注释函数
function uncomment(targetSelector) {
  // 遍历所有节点，筛选出包含目标元素id的注释节点
  $('*').contents().filter(function() {
    return this.nodeType === 8 && this.textContent.includes(targetSelector.replace('#', ''));
  }).each(function() {
    // 清理注释标记和多余的末尾引号
    var cleanHtml = this.textContent.replace(/^<!--|-->$/g, '').replace(/\"$/, '');
    // 将HTML转为DOM元素并替换注释节点
    $(this).replaceWith($(cleanHtml));
  });
}

// 绑定按钮点击事件测试
$('#commentBtn').click(function() {
  comment($('#div1'));
});

$('#uncommentBtn').click(function() {
  uncomment('#div1');
});
</script>