如何不依赖jQuery实现类似PHP strip_tags的HTML标签过滤功能

完全匹配需求逻辑：仅剥离非法标签、保留标签内的文本和合法子标签，无第三方依赖，输入输出均为HTML字符串。

核心实现代码 #

function sanitizeHtml(inputHtml, validTags = ['b', 'strong', 'i', 'em', 's', 'a', 'img', 'blockquote', 'ul', 'li']) {
  // 转换为小写集合，提高查找效率同时兼容标签大小写写法
  const validTagSet = new Set(validTags.map(tag => tag.toLowerCase()));
  // 浏览器原生API解析HTML字符串为DOM结构
  const parser = new DOMParser();
  const doc = parser.parseFromString(inputHtml, 'text/html');
  // 获取所有元素节点，倒序遍历保证先处理内层节点避免结构变更影响
  const allElements = Array.from(doc.body.querySelectorAll('*'));
  for (let i = allElements.length - 1; i >= 0; i--) {
    const currentEl = allElements[i];
    if (!validTagSet.has(currentEl.tagName.toLowerCase())) {
      // 将非法标签的所有子节点移动到父节点对应位置
      while (currentEl.firstChild) {
        currentEl.parentNode.insertBefore(currentEl.firstChild, currentEl);
      }
      // 移除空的非法标签节点
      currentEl.remove();
    }
  }
  // 返回处理后的HTML字符串
  return doc.body.innerHTML;
}

若需要进一步过滤合法标签的属性（比如仅保留a标签的href属性、过滤其他自定义属性），可在合法标签的判断分支内添加属性遍历清理的逻辑即可。

使用示例 #

// 输入待处理的HTML字符串
const rawHtml = `
<blockquote>
  <p>Lorem ipsum dolor...</p>
  <footer>
  By <a href="https://www.github.com/someuser"><strong>Some User</strong></a>
    in March, 13
  </footer>
</blockquote>
`;

// 调用过滤方法
const cleanedHtml = sanitizeHtml(rawHtml);

// 输出结果可直接用于客户端渲染
console.log(cleanedHtml);

输出效果说明 #

原HTML中的p、footer标签不在合法标签列表中，会被直接剥离，标签内的文本和合法的a、strong标签会被完整保留，和原jQuery实现的效果完全一致。

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