我拥有一个由多个HTML模板组成的字符串，每个模板都被带有id的script标签包裹。示例模板字符串如下：

<script id="id1"> some html </script> <script id="id2"> some other html </script>

我希望根据指定id找到对应模板，并获取去除外层script标签后的HTML模板内容。目前可行的jQuery实现方案如下：

var template = $(templates).filter("#id1").html();

但我需要用纯JavaScript实现相同功能，却未找到简洁方案，请问该如何实现？

纯JavaScript实现方案 #

其实咱们可以借助浏览器原生的DOM API来实现，思路和jQuery完全一致——先把字符串转换成可查询的DOM结构，再定位目标节点提取内容。这里有两种简洁靠谱的实现方式：

方法一：使用DOMParser（推荐）

DOMParser是专门用来解析HTML/XML字符串的API，它会生成一个独立的文档对象，不会影响当前页面的DOM，安全又高效：

function getTemplate(templatesStr, targetId) {
  const parser = new DOMParser();
  // 把字符串解析成HTML文档
  const doc = parser.parseFromString(templatesStr, 'text/html');
  // 通过ID查找目标script标签
  const targetScript = doc.getElementById(targetId);
  // 存在则返回内部内容（trim是为了去除首尾多余空格，按需选择）
  return targetScript ? targetScript.textContent.trim() : null;
}

// 使用示例
const templates = '<script id="id1"> some html </script> <script id="id2"> some other html </script>';
const myTemplate = getTemplate(templates, 'id1');
console.log(myTemplate); // 输出："some html"

方法二：创建临时容器元素

如果需要兼容一些非常老旧的浏览器（比如IE9及更早版本），可以用临时div来承载解析后的DOM：

function getTemplate(templatesStr, targetId) {
  const tempContainer = document.createElement('div');
  // 把模板字符串插入到临时div中
  tempContainer.innerHTML = templatesStr;
  // 通过选择器查找目标元素
  const targetScript = tempContainer.querySelector(`#${targetId}`);
  return targetScript ? targetScript.textContent.trim() : null;
}

// 使用示例
const templates = '<script id="id1"> some html </script> <script id="id2"> some other html </script>';
const myTemplate = getTemplate(templates, 'id2');
console.log(myTemplate); // 输出："some other html"

小提示

• 用textContent获取内容比innerHTML更稳妥，因为它不会额外解析内部的HTML标签，直接返回原始内容；如果你的模板里有需要保留的HTML结构，也可以换成innerHTML
• 记得加上空值判断，避免找不到对应ID时抛出错误
• 这两种方法和jQuery的实现逻辑本质是一样的，都是先构建DOM结构，再查询提取，只不过用了原生API而已

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