如何程序化移除HTML节点中的无效/损坏属性？

你遇到的是HTML节点包含不符合规范的无效属性（比如示例里的"="""或""=""这类无属性名的结构），这类无效属性会干扰HTML解析，下面提供几种编程处理的方式：

方法一：利用浏览器原生解析器自动修复 #

浏览器的HTML解析引擎会自动修正不符合规范的代码，直接借助这个特性就能快速清理无效属性：

function fixInvalidAttributes(htmlStr) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlStr;
  // 浏览器已自动清理无效属性，返回修复后的HTML
  return tempContainer.innerHTML;
}

// 测试用例
const brokenHtml = '<p help="123" "=""&gt;bla bla&lt;/p&gt;';
console.log(fixInvalidAttributes(brokenHtml));
// 输出结果: <p help="123">bla bla</p>

这种方法简单高效，完全依赖浏览器的标准解析逻辑，适合前端浏览器环境使用。

方法二：正则表达式定向移除（适合简单场景） #

如果是处理特定模式的无效属性，比如""=""或"="""这类结构，可以用正则直接匹配删除：

function removeInvalidAttrsByRegex(htmlStr) {
  // 匹配无属性名的无效属性模式
  return htmlStr.replace(/"\s*=\s*""?/g, '');
}

// 测试用例
const brokenHtml = '<p data-test="123" "=""&gt;bla bla&lt;/p&gt;';
console.log(removeInvalidAttrsByRegex(brokenHtml));
// 输出结果: <p data-test="123">bla bla</p>

注意：正则只能处理预设的无效属性模式，如果遇到更复杂的无效结构，可能需要调整正则规则，通用性不如专业解析工具。

方法三：用专业HTML解析库处理（Node.js环境） #

在Node.js环境下，推荐使用cheerio这类专业HTML解析库，能更可靠地处理各种无效属性：

const cheerio = require('cheerio');

function fixInvalidAttrsWithCheerio(htmlStr) {
  const $ = cheerio.load(htmlStr);
  // 遍历所有元素
  $('*').each((_, elem) => {
    const attributes = $(elem).attr();
    // 检查并移除无效属性
    Object.keys(attributes).forEach(attrKey => {
      // 移除空键或符合无效模式的属性
      if (!attrKey || attrKey.match(/^"\s*=\s*"$/)) {
        $(elem).removeAttr(attrKey);
      }
    });
  });
  return $.html();
}

// 测试用例
const brokenHtml = '<p help="123" "=""&gt;bla bla&lt;/p&gt;';
console.log(fixInvalidAttrsWithCheerio(brokenHtml));
// 输出结果: <p help="123">bla bla</p>

这种方法通过DOM遍历精准处理每个属性，能覆盖更多复杂的无效属性场景，适合后端批量处理HTML的需求。

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