Поиск и удаление свойств css из строки js cssText

Я смотрю на cssText элемента и получаю следующую строку:

Вход:

"position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;"

Я хочу создать функцию, которая будет анализировать строку и возвращать следующее:

Выход:

"position: absolute;  left: 33.999%;  top: 835px;"

Обновлено:
Вот моя попытка, но какой способ сделать это более эффективно?

let str = 'position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;';
let keys = ['opacity', 'transition'];

function cleanStr(str, keys) {
    let splitStr = str.split(';');
    let matchingItems = [];

    for (let a = 0; a < splitStr.length; a++) {
        for (let b = 0; b < keys.length; b++) {
            if (splitStr[a].search(keys[b]) !== -1) {
                if (matchingItems.indexOf(splitStr[a]) === -1) {
                    matchingItems.push(splitStr[a]);
                }
            }
        }
    }

    return splitStr.filter((filteredStr) => {
        return matchingItems.indexOf(filteredStr) === -1;
    }).join('; ')
}

cleanStr(str, keys);

Вот кодовый ключ.

Они динамически добавляются сторонним плагином во время анимации, но плагин не может удалить их после завершения анимации.

— 07.05.2018 23:05

javascript css string

07.05.2018 22:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Решение O (n) заключалось бы в создании объекта, отражающего правила, удалении соответствующих ключей и последующей строковой обработке вывода:

const cleanStr = (str, keys) => {
  const rules = str.split(';').reduce((rules, rule) => {
    const match = rule.match(/(\w+):\s*(\w+)/);
    if (match) {
      const [_, name, value] = match;
      rules[name] = value
    }
    return rules;
  }, {});
  keys.forEach(key => delete rules[key]);
  return Object.entries(rules).reduce((str, [key, value]) => `${str} ${key}: ${value};`, "");
};

const str = 'position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;';
const keys = ['opacity', 'transition'];


console.info(cleanStr(str, keys));

Теперь, на всякий случай, вы можете использовать карту ES2015, поскольку ключи потенциально являются произвольным (небезопасным) вводом:

const cleanStr = (str, keys) => {
  const items = str.split(';').map(rule => {
    const match = rule.match(/(\w+):\s*(\w+)/);
    return match ? [match[1], [match[2]]] : null;
  }).filter(v => !!v);
  const rules = new Map(items);
  keys.forEach(key => rules.delete(key));
  return [...rules].reduce((str, [key, value]) => `${str} ${key}: ${value};`, "");
}
const str = 'position: absolute; left: 33.999%; top: 835px; opacity: 1; transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;';
const keys = ['opacity', 'transition'];
console.info(cleanStr(str, keys));

Спасибо за ответ! Я думаю, что оба решения надежны, однако ожидаемый результат еще не совсем достигнут. Я обновил вопрос, чтобы включить вывод.

— 08.05.2018 03:50

08.05.2018 00:36