Строка проверки переменной

Question

Дана строка в котором написана CSS код. И надо выяснить в нем все правильно написано, или нет?

Например

div > p {
    color: red;
    font-size 14px;
}

В вышеуказанном примере есть ошибка так как после font-size нет двоеточия. В задаче предпологается что значения парамтеров (red, 14px и т.д.) всегда переданы правильно.

Нужно написать функцию, которая строкой получает CSS код и возврощает true/false (только для этих 12 случиях) в зависимости от того CSS код написан правильно или нет.

Поможете решить задачу?

Answer 1

Если на чистом javascript, без использования библиотек валидации css.
В случае, если стоит прям такая задача и валидация нужна (только для этих 12 случаев), как написано в вопросе.

то, можно таким образом это сделать:

    function  validateCSS(css){
        let z = css.split('{');
        if(z[0] == '' || z[1] == '' || z.length!=2){
            return false;
        } else if(z[1] == '}') {
            return true;
        } else {
            let trig = 0;
            let z1 = z[1].split(';');
            z1.pop();
            for(let i=0;i<z1.length;i++){
                let z2 = z1[i].split(':');
                if(z2.length !=2){
                    trig = 0;
                    return false;
                } else {
                    let z3 = z2[0].split(' ');
                    if(z3.length >2){
                        trig = 0;
                        return false;
                    } else {
                        trig = 1;
                    }
                }
            }
            if (trig == 1){
                return true;
            }
        }
    }

    console.log(validateCSS("div>p{ color:red; font-size  14px; }"));    // false
    console.log(validateCSS("{color: red}"));   // false
    console.log(validateCSS("p{ color: red; }"));   // true
    console.log(validateCSS("p{ color: red font-size: 14px; }"));    // false
    console.log(validateCSS("p:first-child a{ color: red; }"));    // true
    console.log(validateCSS("a:not(.red):last-child{ color:red; background:red; border:1px solid red; }"));    // true
    console.log(validateCSS("div > p"));    // false
    console.log(validateCSS("div > p {}"));    // true
    console.log(validateCSS("div > p { color: red; background color: green; }"));    // false
    console.log(validateCSS("a{ display: block;} "));    // true
    console.log(validateCSS("a{ display-block; }"));   // false
    console.log(validateCSS("a{ dis play:block; }"));   // false

БЛОГ НА HUSL

Строка проверки переменной

Ответы (1 шт):