javascript - 使用 Regex 将用户输入验证为 CSS？

Question

我正在编写一个程序，允许用户使用拖放式 GUI 创建页面。每个元素(图像、文本等)都将具有易于使用的 CSS 选择器，例如背景颜色和字体大小，但是我的客户要求能够在必要时将自定义 CSS 作为最终选项添加到元素中.

忽略用户可能输入并保存有效的 javascript 函数、尝试设置 body 标签样式等的危险(我将确保通过在 PHP 中转义/PDO 处理用户输入来处理)，我该如何编写一个正则表达式(或其他功能)，粗略地测试用户输入的内容是否是有效的 CSS。我现在的正则表达式是这样的:

([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?;

我用

运行它

var reg = /([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?/;

if (reg.test(textarea.val())) {
    console.log("yay");
    //add CSS to element
} else {
    console.log("nay");
    //let user know their input is wrong
}

这可以很好地验证

css-selector: css-value;

但是，之后的任何内容仍将验证为真，因为第一部分将为真:

css-selector: css-value;
invalid-css is here!

至于我粗略的意思，我发现所有需要检查的是 : 和 ; 的存在。对于文本，可能还有中间的 -，没有必要检查 css-selector 本身是否确实作为 CSS 属性存在，也没有必要检查 CSS-value 是否是所述选择器的有效值。

有没有办法确保整个输入值必须为真？

最后一点，如果您发现与插入脚本标签或样式化潜在的整页元素没有直接关系的潜在危险，我应该有所不同，请告诉我

编辑:由于很多人说我无法验证真实 CSS，我将进一步说明我的要求；首先，有效的正则表达式:

css-selector: css-value;
other-css-selector: other-css-value;

无效的正则表达式:

css-selector: css-value;
invalid-css is here!

其次，我想要的是验证我是否可以将字符串传递给:

$(element).css(validated-string);

并且让 chrome 处理所应用的内容是否实际有效，就像您实时编辑 CSS 一样

其次，我提到了 PHP 验证，但我想要的是实时更新 CSS，以便用户可以在添加时看到他们编辑的效果

Answer 1

作为正则表达式，您可以使用 ^([A-Za-z\-]+?:\s*?[0-9A-Za-z\-%]+?;\s*?)* ?$，但我仍然不太确定它会丢弃所有无效的 css。 如果您有 test: 100something; 对正则表达式有效但不是有效的 CSS。