Заменить CSS "#" (ID) на. (Класс)

Question

У меня есть строка CSS типа

    #xyz{
          color:#ee2ee2;
      }
     .abc{
        background-color:#FFFFFF;
        border-color:1px solid #eee;
     }
    .def #xyz{
       border-color:1px solid #ddd;
    }

Мне нужно заменить #xyz (или любой другой селектор идентификаторов) на .xyz без изменения color: #ee2ee2 (или любого другого селектора цвета). Базовый код java-скрипта подойдет

Я пробовал некоторые регулярные выражения, но в некоторых случаях это не удается

cssText.replace(/#([a-zA-Z])/gm, '.$1');

Answer 1

Это заменит # на . только тогда, когда где-то в той же строке есть {.

cssText = `
  #xyz
  {
     color:#ee2ee2;
  }
  .abc{
     background-color:#FFFFFF;
     border-color:1px solid #eee;
  }
  .def #xyz{
     border-color:1px solid #ddd;
  }
  body{background-color:#fff000;}.ig26{padding:20px;}.icts{width:200px;height:200px;padding:10px;} 
`;
console.log(cssText.replace(/#([a-zA-Z])(?=[^}]*{)/g, '.$1'));

Answer 2

Это не очень хорошая работа для регулярных выражений. Вы получите намного более надежные результаты, используя правильный синтаксический анализатор CSS. Например:

const css = require('css');

const ast = css.parse(myInputString);

ast.stylesheet.rules.forEach(rule => {
  if (rule.type === 'rule') {
    rule.selectors = rule.selectors.map(selector => selector.replace('#', '.'))
  }
});

return css.stringify(ast);

(Примечание: я не полностью протестировал этот код. Но принцип тверд.

Answer 3

Мое предложение здесь состоит в том, чтобы использовать библиотеку, которая может анализировать объект в правилах, как предложено @ Jakub.

---

В этом ответе используется следующее регулярное выражение /#(?!:[\w]+)(?=([\w\d\[\]\,\*\=\>\.\s]*[\{\,\[]+))/g, которое должно эффективно соответствовать# при прохождении группы без записи (представляющей сам Id), которая, в свою очередь, переходит группу позитивного просмотра (в виде последовательности слова (a-zA-Z0-9_) и специальных символов, включая пробелы и символы новой строки, которые обрабатываются {,,, [).

var outputElm = document.getElementById("output");

var importedCode = `div#xyz, #xyz, div#xyz[id='xyz'],
 .def>#xyz, .def>div#xyz, .def>#xyz,
 .def>div#xyz[id=*]
{
	color:#ee2ee2;
}


@media (min-width: 30em) and (orientation: landscape) 
{
  .abc{
      background-color :#FFFFFF;
      border-color:1px solid #eee ;
  }

  .def>#xyz, .def #xyz, .def>#xyz{border-color:1px solid #ddd;}
  .def>#xyz>div, .def #xyz div, .def>#xyz>div.abc {border-color:1px solid #ddd;}
}`;

var replaceIdRegex = /#(?!:[\w]+)(?=([\w\d\[\]\,\*\=\>\.\s]*[\{\,\[]+))/g;

outputElm.innerText = importedCode.replace(replaceIdRegex, ".");

<p id="output">
</p>

Я провел довольно большое количество тестов по этому вопросу, но не могу сказать, что это не хрупко или может объяснить каждый сценарий.

---

Вы также можете протестировать эту реализацию на regex101 игровой площадке.

Answer 4

Сопоставляя пробелы в начале строки, вы можете использовать регулярное выражение ^\s+#(\w+).

Пример в Java 13:

var regex = "^\\s+#(\\w+)";
var string = """
        #xyz{
              color:#ee2ee2;
          }
         .abc{
            background-color:#FFFFFF;
            border-color:1px solid #eee;
         }
        .def #xyz{
           border-color:1px solid #ddd;
        }
    """;

var matcher = Pattern.compile(regex, Pattern.MULTILINE).matcher(string);
var newString = matcher.replaceAll(".$1");