Блог

Я хочу изменить цвет ключевых слов данного предложения. Пока у меня есть это:

 const engSample = document.querySelector(".eng-sample");

engSample.innerHTML = getColoredEngSample("I have been walking");

function getColoredEngSample(text) {

        let resu<
        const keywords = ["have", "has", "been", "ing"];
        keywords.forEach(key => {
            result = text.replace(key, `<span class='bold-sample'>${key}</span>`);
        });
    return resu<
} 

 .bold-sample { color: #ff3c00; } 

 <p class="eng-sample"></p> 

Как вы видите ing , меняется только цвет, а остальные ключевые слова — нет.

Как я могу это исправить или добиться того же результата с помощью регулярных выражений?

Вы заменяете result на оригинал text на каждой итерации. Итак, вы должны изменить свой код, чтобы быть:

 function getColoredEngSample(text) {
    let result = text;
    const keywords = ["have", "has", "been", "ing"];
    keywords.forEach(key => {
        result = result.replace(key, `<span class='bold-sample'>${key}</span>`);
    });

    return resu<
}
 

Проблема в том, что вы используете свою переменную text , которая не меняется со временем. Каждый раз, когда ваш цикл запускает раунд, он будет использовать один и тот же текст из вашего параметра text . При следующем запуске цикла изменение текста записывается в результат, но больше никогда не используется. Таким образом, результат будет содержать только результат последнего прохождения цикла.

 const engSample = document.querySelector(".eng-sample");

engSample.innerHTML = getColoredEngSample("I have been walking");

function getColoredEngSample(text) {

        let result = text;
        const keywords = ["have", "has", "been", "ing"];
        keywords.forEach(key => {
            result = result.replace(key, `<span class='bold-sample'>${key}</span>`);
        });
    return resu<
} 

 .bold-sample { color: #ff3c00; } 

 <p class="eng-sample"></p>