Using Regex to validate user input as CSS?

Question

I am writing a program that allows the user to create a page using a drag-n-drop GUI. Every element (image, text, etc) will have easy-to-use CSS selectors like background-color and font-size, however my client has asked for the ability, when necessary, to add custom CSS to the element as a final option.

Looking past the dangers of users possibly typing in and saving valid javascript functions, trying to style the body tag etc. (I will make sure to handle that by escaping/PDO-handling user input in PHP), how can I write a regex (or another functionality) that tests, crudely, if what the user types in is valid CSS. My regex at the moment is this:

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

And I run it using

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
}

This works fine to validate

css-selector: css-value;

However, anything after that it will still validate as true because the first part will be true:

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

As for what I mean with crudely, all that I find necessary to check is the presence of a : and a ; with text, and possibly a - in-between, it is not necessary to check if the css-selector itself actually exists as a CSS attribute nor if the CSS-value is a valid value of said selector.

Is there a way to ensure the entire input value MUST be true?

As a final note, if you see a potential danger not directly related to inserting script-tags or styling potential whole-page elements that I should be vary of, please let me know

Edit: due to many saying that I can't validate real CSS, I am going to specify my requirement a bit further; first, valid regex:

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

invalid regex:

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

Secondly, what I want is something that validates if I can pass the string to:

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

And have chrome handle whether what is applied is actually valid, much like it does if you edit CSS live

Secondly, I mention PHP validation, but what I want is to update the CSS live so the user can see the effect of their edits as they add them

Comments are not for extended discussion; this conversation has been moved to chat. — user3956566
– user3956566, Commented Feb 27, 2019 at 8:54

DrFreeze · Accepted Answer · 2019-02-27 08:18:53Z

1

As regex you can use ^([A-Za-z\-]+?:\s*?[0-9A-Za-z\-%]+?;\s*?)*?$, but still i'm not quite sure that it will discard all the invalid css. If you have test: 100something; is valid for the regex but is not valid CSS.

edited Feb 27, 2019 at 8:18

answered Feb 27, 2019 at 8:09

DrFreeze

13710 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Troels M. B. Jensen Over a year ago

whether or not it is valid CSS is not my main meat, what I want is something that is valid enough for me to run $(element).css(validated-css-string); and let chrome handle the rest

guest271314 Over a year ago

@TroelsM.B.Jensen What do you mean by "valid enough"? How is the example code "$(element).css(validated-css-string);" related to the question?

Troels M. B. Jensen Over a year ago

@DrFreeze Your edit seems to have done the trick! I thank you for your knowledge oh Great One

Collectives™ on Stack Overflow

Using Regex to validate user input as CSS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related