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

Question

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

1

Я смотрю на 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);

Вот код.

katyusha 07 май 2018, в 23:22

Источник

0

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

Теги:

javascript

string

css

1 ответ

Ещё вопросы

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

AnilRedshift · Answer 1 · 2018-05-07T21-22-00.000Z

Решение AO (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.log(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.log(cleanStr(str, keys));

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