正则表达式删除供应商前缀CSS

Question

看起来非常简单，但使用RegEx似乎没有什么是简单的。我想做的就是获取一系列CSS属性：

[ 'background',
  'border',
  'font-size',
  'margin',
  'outline',
  'padding',
  'vertical-align',
  'line-height',
  'display',
  'list-style',
  'quotes',
  'content',
  'background-color',
  'color',
  'text-decoration',
  'font-style',
  'font-weight',
  'border-bottom',
  'cursor',
  'border-collapse',
  'border-spacing',
  'border-top',
  'height',
  'box-shadow',
  'text-shadow',
  'page-break-inside',
  'max-width',
  'orphans',
  'widows',
  'page-break-after',
  'font-family',
  'src',
  'speak',
  'font-variant',
  'text-transform',
  'text-rendering',
  '-webkit-font-smoothing',
  '-moz-osx-font-smoothing',
  'box-sizing',
  'width',
  '-webkit-tap-highlight-color',
  'margin-top',
  'margin-bottom',
  'margin-left',
  'touch-action',
  'padding-top',
  'padding-bottom',
  'text-align',
  'caption-side',
  'border-radius',
  'resize',
  'min-width',
  '-webkit-appearance',
  'clear',
  'margin-right',
  'foat',
  'float',
  'position',
  'overflow',
  'clip',
  'visibility',
  'font',
  'text-overflow',
  'white-space',
  'padding-left',
  'padding-right',
  '-ms-word-break',
  'word-break',
  '-webkit-hyphens',
  '-moz-hyphens',
  '-ms-hyphens',
  'hyphens',
  'pading-left',
  'border-left',
  'border-right',
  'top',
  'left',
  'transform',
  '-webkit-transform',
  'z-index',
  'right',
  'bottom',
  'max-height',
  'isplay',
  'overflow-x',
  'flex-wrap',
  'min-height',
  'flex',
  'order',
  'align-items',
  'align-self',
  'background-image',
  'opacity',
  'background-size',
  'background-repeat',
  'data',
  'user-select',
  'border-color',
  'transition',
  'pointer-events',
  'boder-color',
  'border-top-right-radius',
  'border-bottom-right-radius',
  'border-top-left-radius',
  'border-bottom-left-radius',
  'border-width',
  'border-style',
  '-ms-transform' ]

删除所有供应商前缀的。正则表达式只是匹配像-ms-transform这样的字符串而不是像border-width这样的字符串会是什么样的？

Answer 1

您可以将Array#filter与RegExp#test一起使用。

var regex = /^-(webkit|moz|ms|o)-/;
var nonVendorPrefixedProperties = arr.filter(prop => !regex.test(prop));

vendor prefixes

1. -webkit-：Chrome，较新版本的Opera
2. -moz-：Firefox
3. -o-：Opera的旧版本
4. -ms-：Internet Explorer

RegEx说明：

1. ^：行首
2. -：匹配连字符
3. (webkit|moz|ms|o)：匹配供应商前缀webkit，moz，ms或o。
＆＃13;
＆＃13;
var arr = ['background',
    'border',
    'font-size',
    'margin',
    'outline',
    'padding',
    'vertical-align',
    'line-height',
    'display',
    'list-style',
    'quotes',
    'content',
    'background-color',
    'color',
    'text-decoration',
    'font-style',
    'font-weight',
    'border-bottom',
    'cursor',
    'border-collapse',
    'border-spacing',
    'border-top',
    'height',
    'box-shadow',
    'text-shadow',
    'page-break-inside',
    'max-width',
    'orphans',
    'widows',
    'page-break-after',
    'font-family',
    'src',
    'speak',
    'font-variant',
    'text-transform',
    'text-rendering',
    '-webkit-font-smoothing',
    '-moz-osx-font-smoothing',
    'box-sizing',
    'width',
    '-webkit-tap-highlight-color',
    'margin-top',
    'margin-bottom',
    'margin-left',
    'touch-action',
    'padding-top',
    'padding-bottom',
    'text-align',
    'caption-side',
    'border-radius',
    'resize',
    'min-width',
    '-webkit-appearance',
    'clear',
    'margin-right',
    'foat',
    'float',
    'position',
    'overflow',
    'clip',
    'visibility',
    'font',
    'text-overflow',
    'white-space',
    'padding-left',
    'padding-right',
    '-ms-word-break',
    'word-break',
    '-webkit-hyphens',
    '-moz-hyphens',
    '-ms-hyphens',
    'hyphens',
    'pading-left',
    'border-left',
    'border-right',
    'top',
    'left',
    'transform',
    '-webkit-transform',
    'z-index',
    'right',
    'bottom',
    'max-height',
    'isplay',
    'overflow-x',
    'flex-wrap',
    'min-height',
    'flex',
    'order',
    'align-items',
    'align-self',
    'background-image',
    'opacity',
    'background-size',
    'background-repeat',
    'data',
    'user-select',
    'border-color',
    'transition',
    'pointer-events',
    'boder-color',
    'border-top-right-radius',
    'border-bottom-right-radius',
    'border-top-left-radius',
    'border-bottom-left-radius',
    'border-width',
    'border-style',
    '-ms-transform'
];

var regex = /^-(webkit|moz|ms)-/;
var nonVendorPrefixedProperties = arr.filter(prop => !regex.test(prop));

console.log(nonVendorPrefixedProperties);
document.getElementById('result').innerHTML = JSON.stringify(nonVendorPrefixedProperties, 0, 4);
＆＃13;
<pre id="result"></pre>
＆＃13;
＆＃13;
＆＃13;