JS正则匹配带连字符CSS属性键值对时无法获取属性值问题求解

你用来提取内容的正则/\w+\-\w+/g有逻辑缺陷：这个规则要求所有匹配结果必须包含连字符-，即结构为「单词字符+连字符+单词字符」。待提取的属性值red本身没有连字符，完全不符合这个匹配规则，自然不会被收入匹配结果数组，最终数组里只会存在带连字符的属性名background-colour，访问temp[1]拿到的只会是undefined。

另外你写的校验正则也存在兼容问题：

• 只能匹配恰好带1个连字符的属性名，遇到border-left-width这类多连字符属性会直接校验失败
• 只支持纯字母的属性值，遇到1、14px这类带数字的属性值会校验不通过

不需要单独写两套正则分别做校验和提取，直接用带捕获组的正则一次完成合法性校验+内容提取即可，既减少冗余代码，也能避免两套正则规则不一致导致的匹配异常：

let ed = document.getElementById("editor").innerText; 
let dest = document.getElementById("destination");

// 正则规则说明：
// 1. 开头^、结尾$约束整串完全匹配，避免漏校验多余字符
// 2. 第一个捕获组匹配属性名：支持任意数量连字符拼接的字母串，兼容单段/多段连字符的CSS属性
// 3. 第二个捕获组匹配属性值：支持字母+数字组合，覆盖常见CSS属性值场景
const cssMatchReg = /^([a-zA-Z]+(?:-[a-zA-Z]+)*):([a-zA-Z0-9]+);$/i;
const matchResult = ed.match(cssMatchReg);

if (matchResult) {
    console.log("valid input");
    const att = matchResult[1]; // 第一个捕获组为属性名
    const quant = matchResult[2]; // 第二个捕获组为属性值
    console.log(att, quant);
    dest.style.setProperty(att, quant);
}

如果后续需要支持更复杂的属性值（比如带十六进制颜色、带单位的数值），只需要调整第二个捕获组的匹配规则即可，不需要改动整体逻辑。

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