Заменить цветные строки в строке HTML внутри тегов - PullRequest
Новая
       2

Заменить цветные строки в строке HTML внутри тегов

0 голосов
/ 12 февраля 2020

У меня есть строка, содержащая HTML. Теперь я хочу заменить все вхождения цветов в тегах чем-то. Как мне это сделать? 

const workInProgressRegex = /<[\w]+[^>]*>.*?(#(?:[0-9a-fA-F]{3}){1,2})<\/[\w]+>/gim;

const exampleString1 = `<div><span class="foo" style="background-color: #ffffff;">#222222 foo #111111 abc #000000</span></div>`;

const exampleString2 = `<div><span class="foo" style="background-color: #ffffff;">"'#222222 foo #111111 abc #000000</span></div>`;

const result1 = exampleString1.replaceAll(workInProgressRegex, "bar");
// should be `<div><span class="foo" style="background-color: #ffffff;">bar foo bar abc bar</span></div>`

const result2 = exampleString1.replaceAll(workInProgressRegex, "bar");
// should be `<div><span class="foo" style="background-color: #ffffff;">"'bar foo bar abc bar</span></div>`

Дополнительная информация: Я хочу заменить все вхождения текста любых шестнадцатеричных цветов внутри тегов HTML. Примеры, которые я привел, являются лишь примерами и не являются исчерпывающими.

Хотя я не ищу что-то неразрывное, оно должно быть надежным. Это означает, что шестнадцатеричные коды могут находиться в любом месте внутри HTML, они не обязательно должны быть в конце или в начале. Также в теге может быть произвольное количество этих шестнадцатеричных кодов.

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Проблема в том, что вы не можете просто заменить все вхождения #xxxxxx, потому что это также приведет к удалению style="background-color: #ffffff;" из вашей строки, что вы хотите сохранить.

Однако вы можете создать цепочку две функции замены, где первая ищет шаблон # xxxxxx [пустое пространство] , а вторая - # xxxxxx <</strong> (из-за последнего вхождения #000000</span>, который будет заменен на bar /span> в противном случае). 

const exampleString2 = `<div><span class="foo" style="background-color: #ffffff;">"'#222222 foo #111111 abc #000000</span></div>`;

var res = exampleString2.replace(new RegExp(/(#[0-9|a-f]{6} )/, 'g'), 'bar ').replace(new RegExp(/(#[0-9|a-f]{6}<)/, 'g'), 'bar<');
console.log(res);
0 голосов
/ 12 февраля 2020

Я думаю, что вы ищете это регулярное выражение (#[0-9|a-f]{6}), которое должно выбрать все ваши шестнадцатеричные цветовые коды.

https://regex101.com/r/Xvct56/2/

...