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

【问题标题】：How to check if DOM/HTML element attribute name is valid in Javascript/JSX? (to prevent invalid character exception)如何检查 DOM/HTML 元素属性名称在 Javascript/JSX 中是否有效？（防止无效字符异常）
【发布时间】：2021-03-15 22:19:22
【问题描述】：

如果名称无效，则在 DOM 元素上设置属性可能会引发异常。 https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute 的文档提到了抛出的异常：

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

如何检查（在 Javascript 或 JSX 中）HTML 属性名称是否有效？我想在设置属性之前对字符串做一个简单的检查，这样我就可以在这个错误发生之前中止。

【问题讨论】：

你试过什么？您可以在内存中创建一个元素并try/catch 尝试。
@chazsolo 不幸的是，我什至找不到有效属性名称的规范。如果我有那个，我可以写一个正则表达式。但我希望 JS 有一些内置的东西，到目前为止我还没有通过谷歌找到。您可以发布您的 try/catch 建议作为答案吗？
Here's the docs from MDN 和 spec

标签： javascript html dom jsx

【解决方案1】：

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

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

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

【讨论】：

虽然我认为这可行，但我不推荐它。维护这样一个list and validation 的开销将是一场噩梦。
我完全同意你的看法，但这是他所要求的解决方案“我想在设置属性之前对字符串做一个简单的检查，所以我可以在这个错误发生之前中止。”

【解决方案2】：

var element = document.getElementById("myElement");

try{
    //attribute name is invalid so it will throw an error
    element.setAttribute("", "value");
}
catch(error){
    console.log("Invalid Attribute Name");
}

&lt;h1 id="myElement"&gt;&lt;/h1&gt;

【讨论】：

【解决方案3】：

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;
}

【讨论】：