How to check if any CSS Properties are in string with Javascript?

Question

Code for checking over 1,000 sentences

Does Javascript have a built in CSS index I can check a sentence against?

At the moment…

If I wanted to check the sentences below for CSS properties, I have to create an array with ……(( ALL )) the CSS properties. Then check each sentence against the entire array.

Array

css_checker = [
"width","height","background","background color", "text decoration line", "right",
"table layout", "page break before", //and on… and… on and on………………

// I really don't want to use this array
// Using this is like a last resort
// I was hoping for a better way than this
]

Input

a = "A CSS property named animation fill mode is in this string"

b = "There are no CSS properties in this string"

c = "Width, height, and animation properties are in this string"

d = "Column rule width and transform origin are in this string"

Matchs

a: A CSS property named animation fill mode is in this string

b: There are no CSS properties in this string

c: Width, height, and animation properties are in these string

d: Column rule width and transform origin are in these string

Output

a: true

b: false

c: true

d: true

How to use it

if ( /*Sentence has CSS property*/ ) {
        //run this code
}

What I'm trying to do is

Find out where the first CSS property is located… and then split it at that point.

Example

Input

A CSS property named animation fill mode and width is in this string

Match

A CSS property named animation fill mode and width is in this string

Output

animation fill mode and width is in this string

Sterling Archer · Accepted Answer · 2017-09-29 03:50:18Z

5

You can use some in this to test the strings. If you're grabbing from element text, just pass in element.textContent.

function containsCSSProp(str) {
    css_checker = ["width","height","background","background color", "text decoration line", "right", "table layout", "page break before", "animation", "column rule width", "transform origin"];
    return css_checker.some(prop => str.toLowerCase().includes(prop));
}

console.log(containsCSSProp("A CSS property named animation fill mode is in this string"));
console.log(containsCSSProp("There are no CSS properties in this string"));
console.log(containsCSSProp("Width, height, and animation properties are in this string"));
console.log(containsCSSProp("Column rule width and transform origin are in this string"));

answered Sep 29, 2017 at 3:50

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

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

2 Comments

Allen Marshall Over a year ago

I updated the question… can you check the What I'm trying to do is section

Allen Marshall Over a year ago

Also… performance wise… if I was checking 10,000 sentences… is this a good method?

zhuravlyov · Accepted Answer · 2017-09-29 04:12:07Z

let css_checker = ['width','height','background','background color', 'text decoration line', 'right','table layout', 'page break before'];
let a = 'A CSS property named animation fill mode is in this string';
let b = 'There are no CSS properties in this string';
let c = 'Width, height, and animation properties are in this string';
let d = 'Column rule width and transform origin are in this string';

for (let i = 0, max = css_checker.length; i < max; i++) {
    css_checker[i] = css_checker[i].replace(/\s/g, '');
}

function checkString(str, cssRules) {
    let string = str.replace(/\s/g, '');

    for (let i = 0, max = cssRules.length; i < max; i++) {
        if (string.toLowerCase().indexOf(cssRules[i]) !== -1) {
            console.log('true');
            return;
        }
    }

    console.log('false');
}



checkString(a, css_checker);
checkString(b, css_checker);
checkString(c, css_checker);
checkString(d, css_checker);

Another variant for you! It takes 8ms for 10 000 sentences and it's faster then the first answer

Collectives™ on Stack Overflow

How to check if any CSS Properties are in string with Javascript?

Code for checking over 1,000 sentences

Example

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code for checking over 1,000 sentences

Example

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related