如何使用Javascript检查任何CSS属性是否在字符串中？

Question

检查 1,000 多个句子的代码

是否Javascript有内置CSS index我可以检查句子？

在这一刻…

如果我想检查下面的句子 f​​or CSS properties，我必须创建一个arraywith ……(( ALL ))CSS properties.然后根据整个句子检查每个句子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
]

输入

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"

比赛

a：一个名为的 CSS 属性 animation fill mode在这个字符串中

b: 此字符串中没有 CSS 属性

c: Width, height, 和animation属性在这些字符串中

d：Column rule width并且transform origin在这些字符串中

输出

答：真的

乙：假

c: 真的

d: 真的

如何使用它

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

---

我想做的是

找出第一个 CSS 属性的位置……然后在那个点拆分它。

例子

输入

名为动画填充模式和宽度的 CSS 属性在此字符串中

比赛

一个名为的 CSS 属性 animation fill mode and width is in this string

输出

动画填充模式和宽度在此字符串中

Answer 1

您可以使用some它来测试字符串。如果您从元素文本中抓取，只需传入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"));