Как добавить вариантов для замены?

Question

[Руслан Макаров]

Доброго!

Вот таким кодом я заменяю текст на странице:

<p id="demo">Я люблю синий цвет.</p>

let str = document.getElementById("demo").innerHTML; 
let res = str.replace(/синий/g, "красный");
document.getElementById("demo").innerHTML = res;

И слово синий заменяется словом красный.

Подскажите пожалуйста, как сделать чтобы можно было указать несколько правил для замены
синий-красный,
зеленый-желтый,
белый-черный и т.д

Очень буду благодарен за подсказку, важно, чтобы все варианты замен работали в div с id demo, а то я каждому свой ид назначаю) (не знаю js)
Заранее спасибо!

Answer 1

[Чипекве]

const changeColorRules = [
    ['синий', 'красный'],
    ['зеленый', 'желтый'],
    ['белый', 'черный'],
];

function changeWords(node, rules) {
    node.textContent = rules
        .reduce((str, rule) => str.replace(new RegExp(rule[0], 'gi'),
            (match) => (match[0] === rule[0][0].toUpperCase()) ? rule[1][0].toUpperCase() + rule[1].slice(1) : rule[1]),
            node.textContent);
}

const demoParagraph = document.querySelector('#demo');
changeWords(demoParagraph, changeColorRules);

А для замены слов глобально на странице лучше так: https://qna.habr.com/q/1167308

Comments

[Руслан Макаров]

Спасибо! Работает код, но ломает все отображение div где задан id demo

[Чипекве]

Если внутри блока есть другие элементы (а в примере не было), то, разумеется, они не будут работать как нужно. Нужно менять код в зависимости от структуры элемента.