如何在Javascript/JSX中检查DOM/HTML元素属性名是否有效？（防止无效字符异常）

如果名称无效，则在DOM元素上设置属性可能引发异常。处的文档摘要提到了引发的异常：

无效字符错误 指定的属性名称包含一个或多个在属性名称中无效的字符

如何（在Javascript或JSX中）检查HTML属性名是否有效？在设置属性之前，我想对字符串进行一次简单的检查，以便在出现此错误之前中止操作。

const validAttrs = ['class', 'style'] // add the ones you want

function isValidAttr (attrName) {
  return validAttrs.indexOf(attrName) !== -1
}

isValidAttr('class') // true
isValidAttr('div') // false

var-element=document.getElementById（“myElement”）；
试一试{
//属性名称无效，因此将引发错误
元素。setAttribute（“，”值”）；
}
捕获（错误）{
log（“无效属性名”）；
}

---

您尝试了什么？您可以在内存中创建一个元素，然后

try/catch

尝试。@chazsolo不幸的是，我甚至找不到有效属性名的规范。如果我有这个，我可以写一个正则表达式。但我希望JS有一些内置的东西，我只是没有找到通过谷歌到目前为止。你能把你的“尝试/抓住”建议作为回答吗？虽然我认为这会起作用，但我不推荐它。维护这样一个属性的开销将是一场噩梦。我完全同意你的看法，但这是一个解决方案，他要求“我想在设置属性之前对字符串进行一次简单的检查，这样我就可以在发生此错误之前中止。”

const isValidAttribute => (attr) {
    const unacceptableAttributes = [
        //Anything you dont want added here
    ]
    //make this false to prevent adding javascript events
    const allowEvents = true;

    //testing if it is a valid attribute
    const el = document.createElement("div")
    let answer = false;
    try {
        element.setAttribute(attr)
        answer = true
    } catch (e) {}
    el.remove;

    if (!answer ||
        !allowEvents && attr.startsWith("on") ||
        unacceptableAttributes.indexOf(attr) !== -1) {
        return false
    }
    return true;
}