Как мне изменить цвет указанных c символов в тексте, используя javascript? - PullRequest
Новая
       77

Как мне изменить цвет указанных c символов в тексте, используя javascript?

0 голосов
/ 08 апреля 2020

Итак, у меня есть 2 текстовые зоны. В первом у меня есть ключевые слова, а во втором - текст. Я хочу изменить цвет каждого появления ключевых слов в тексте на красный, и я должен сделать это в режиме реального времени. Вот так: enter image description here

Теперь проблема в следующем: enter image description here

Это мой код:

HTML

<textarea id="filter" cols="50" rows="20"></textarea>
<textarea id="text" cols="50" rows="20" onkeyup="writeText()"></textarea>
<p id="showText"></p>

CSS

.colorText {
    color: red;
}

JS

function writeText() {
    let text = document.getElementById("text").value;
    let filters = document.getElementById("filter").value.split(' ');

    for(var i=0; i<filters.length; i++) {
        var regex = new RegExp(filters[i], 'g');
        text = text.replace(regex, `<span class="colorText">${filters[i]}</span>`);
    }

    document.getElementById("showText").innerHTML = text;
}

Любые идеи о том, как я могу это исправить?

...