如何针对指定HTML标签过滤对象中的有效属性键？

现成JavaScript库推荐 #

1. html-attributes #

这个库内置了全量HTML标签的合法属性列表（包含全局属性与标签专属属性），可以快速实现验证和筛选逻辑：

• 安装命令：npm install html-attributes
• 使用示例：

import htmlAttributes from 'html-attributes';

// 验证单个属性是否有效
function isValidHTMLAttribute(attr, tag) {
  const tagAttrs = htmlAttributes[tag] || [];
  const globalAttrs = htmlAttributes.global || [];
  return [...tagAttrs, ...globalAttrs].includes(attr);
}

// 从对象中筛选指定标签的有效属性
function filterValidHTMLAttributes(obj, tag) {
  const validAttrSet = new Set([
    ...(htmlAttributes[tag] || []),
    ...(htmlAttributes.global || [])
  ]);
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => validAttrSet.has(key))
  );
}

// 测试用例
isValidHTMLAttribute("foo", "div") // false
isValidHTMLAttribute("href", "div") // false
isValidHTMLAttribute("class", "div") // true
isValidHTMLAttribute("href", "a") // true

const testObj = { class: 'container', href: 'https://example.com', foo: 'bar' };
const validDivAttrs = filterValidHTMLAttributes(testObj, "div");
// 返回结果：{ class: 'container' }

2. jsdom（适合依赖DOM环境的场景） #

如果你的项目已经在用jsdom模拟浏览器环境，可以直接利用DOM元素的原生属性校验能力：

import { JSDOM } from 'jsdom';

const domInstance = new JSDOM('');
const doc = domInstance.window.document;

function isValidHTMLAttribute(attr, tag) {
  const elem = doc.createElement(tag);
  elem.setAttribute(attr, 'test');
  return elem.hasAttribute(attr);
}

function filterValidHTMLAttributes(obj, tag) {
  const elem = doc.createElement(tag);
  const validAttrs = {};
  for (const [key, value] of Object.entries(obj)) {
    elem.setAttribute(key, value);
    if (elem.hasAttribute(key)) {
      validAttrs[key] = value;
      elem.removeAttribute(key);
    }
  }
  return validAttrs;
}

轻量手动实现方案 #

如果不想引入第三方库，可以参考MDN文档维护一份属性列表，核心逻辑是合并全局属性与标签专属属性后做校验：

// 全局属性列表（可根据需求补充）
const globalAttributes = ['class', 'id', 'style', 'title', 'lang', 'hidden'];
// 标签专属属性映射
const tagSpecificAttrs = {
  a: ['href', 'target', 'rel', 'download'],
  input: ['type', 'value', 'placeholder', 'disabled', 'checked'],
  img: ['src', 'alt', 'width', 'height'],
  // 其他标签属性可按需添加
};

function isValidHTMLAttribute(attr, tag) {
  // 兼容data-*自定义属性
  if (/^data-.+/i.test(attr)) return true;
  const tagAttrs = tagSpecificAttrs[tag] || [];
  return globalAttributes.includes(attr) || tagAttrs.includes(attr);
}

function filterValidHTMLAttributes(obj, tag) {
  const validAttrs = new Set([...globalAttributes, ...(tagSpecificAttrs[tag] || [])]);
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => validAttrs.has(key) || /^data-.+/i.test(key))
  );
}

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