从JS的cssText字符串中移除指定CSS属性的高效实现

Great question! When it comes to parsing and filtering CSS text efficiently, we have two solid approaches depending on your needs—one that’s concise and fast for well-formed input, and another that’s more robust for edge cases.

Approach 1: Regular Expression (Fast & Concise) #

If you’re working with standard browser-generated cssText (which is always well-formed and doesn’t have semicolons inside values), a regex is a perfect fit. It leverages the browser’s optimized regex engine to quickly match and extract the properties you care about:

function filterCssText(cssText) {
  // Define the properties we want to keep
  const allowedProps = ['position', 'left', 'top'];
  // Create a regex to match each allowed property and its value up to the next semicolon
  const propRegex = new RegExp(`(${allowedProps.join('|')}):[^;]+;`, 'g');
  // Find all matches and join them together
  const matches = cssText.match(propRegex);
  // Return the joined result or an empty string if no matches
  return matches ? matches.join(' ') : '';
}

// Test it with your input
const inputCss = "position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;";
console.log(filterCssText(inputCss));
// Output: "position: absolute; left: 33.999%; top: 835px;"

Why this is efficient:

• Regex operations are optimized at the engine level, making this faster than manual string splitting for most cases.
• It’s a single pass over the string, avoiding unnecessary intermediate array operations.

Approach 2: Split & Filter (Robust for Edge Cases) #

If you need to handle values that might contain colons (though rare in cssText), this method is more reliable. It splits the string into individual declarations, checks each property explicitly, and only keeps the ones you want:

function filterCssText(cssText) {
  // Use a Set for O(1) lookups (faster than array.includes())
  const allowedProps = new Set(['position', 'left', 'top']);
  
  return cssText.split(';')
    // Trim whitespace from each declaration
    .map(declaration => declaration.trim())
    // Remove empty strings (from trailing semicolons)
    .filter(declaration => declaration)
    // Check if each declaration's property is allowed
    .map(declaration => {
      const colonIndex = declaration.indexOf(':');
      // Skip invalid declarations (no colon)
      if (colonIndex === -1) return null;
      const property = declaration.slice(0, colonIndex).trim();
      // Keep the declaration if the property is allowed
      return allowedProps.has(property) ? declaration : null;
    })
    // Remove null values (filtered out declarations)
    .filter(Boolean)
    // Join valid declarations with "; " and add a final semicolon
    .join('; ') + ';';
}

// Test it with your input
const inputCss = "position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;";
console.log(filterCssText(inputCss));
// Output: "position: absolute; left: 33.999%; top: 835px;"

Why this is efficient:

• Using a Set for allowed properties ensures property checks are done in constant time (O(1)) instead of linear time (O(n)) with an array.
• The chain of array methods is optimized in modern JavaScript engines, making it both readable and performant.

Which to Choose? #

• Use the regex approach for most cases with standard cssText—it’s faster and more concise.
• Use the split & filter approach if you need to handle edge cases like values with colons or malformed CSS.

内容的提问来源于stack exchange，提问作者katyusha