如何在DOM中取消注释的内联脚本并将其作为脚本节点插入（无需正则解析构建节点）

你遇到的问题很典型——直接把注释的nodeValue替换到DOM里，浏览器只会把它当成普通文本节点，不会自动解析成可执行的脚本元素。除了正则拆分的方法，还有两个更简洁靠谱的思路：

方法1：借助临时容器的innerHTML自动解析 #

我们可以用一个临时DOM元素当“解析器”，让浏览器把注释里的HTML字符串自动转换成对应的脚本节点，再把节点移到目标位置：

function myFunction() {
  const locator = document.getElementById('foo');
  let comment = locator.nextSibling;
  if (3 === comment.nodeType) {
    comment = comment.nextSibling;
  }
  if (8 !== comment.nodeType) {
    console.warn('Oops! That\'s not a comment!');
    return;
  }
  
  // 创建临时div，利用innerHTML让浏览器解析脚本字符串
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = comment.nodeValue.trim(); // 移除首尾空白避免解析异常
  
  // 取出解析好的脚本节点，替换掉原注释
  const targetScript = tempContainer.querySelector('script');
  if (targetScript) {
    comment.replaceWith(targetScript);
    // 内联脚本插入后会自动执行，外部src脚本也会正常加载
  } else {
    console.warn('No valid script found in the comment!');
  }
}

这个方法的核心是让浏览器帮我们处理HTML解析逻辑，不用自己写正则去匹配标签属性、脚本内容，能避免很多正则覆盖不到的边界情况（比如脚本里包含特殊字符、多行代码等）。

方法2：用DOMParser规范解析HTML字符串 #

如果想更严谨，还可以用专门的DOMParser API来解析注释里的内容，它会生成一个完整的文档对象，我们从中提取脚本节点即可：

function myFunction() {
  const locator = document.getElementById('foo');
  let comment = locator.nextSibling;
  if (3 === comment.nodeType) {
    comment = comment.nextSibling;
  }
  if (8 !== comment.nodeType) {
    console.warn('Oops! That\'s not a comment!');
    return;
  }
  
  // 用DOMParser解析HTML字符串
  const parser = new DOMParser();
  const parsedDoc = parser.parseFromString(comment.nodeValue.trim(), 'text/html');
  const targetScript = parsedDoc.querySelector('script');
  
  if (targetScript) {
    comment.replaceWith(targetScript);
  } else {
    console.warn('No valid script found in the comment!');
  }
}

DOMParser是浏览器原生的HTML/XML解析API，比临时容器的innerHTML更规范，处理复杂HTML结构时稳定性更高。

小提醒 #

• 不管用哪种方法，内联脚本插入DOM后会自动执行，和直接写在页面里的脚本行为完全一致；如果是带src的外部脚本，也会正常发起请求加载执行。
• 要确保注释里的脚本字符串是合法的HTML，虽然浏览器解析器有容错能力，但不规范的语法可能导致解析异常。

内容的提问来源于stack exchange，提问作者philolegein