Ali Majed HA Ответов: 2

Найдите слово в тексте и измените его цвет

Привет
У меня есть несколько тегов li, которые я хочу найти в них определенное слово и изменить цвет слова с помощью JavaScript:

Что я уже пробовал:

код один:
var text = result.replace(_word, _word.fontcolor("red"));
var _test = document.createTextNode("text");

его просто заменяют 
"<font color='red'> _word </font>"
с _word вместо изменения цвета.

код буксировки:
var text = result.replace(_word, "<span style='color:red'>" + _word "</span>");
var _test = document.createTextNode("text");

его просто заменяют 
"<span style='color:red'> _word </span>"
с _word вместо изменения цвета.

2 Ответов

Рейтинг:
15

Thomas Daniels

Вы используете createTextNode что создает просто текст узел, нет HTML-элемента.

Похоже, вы хотите заменить старый HTML-код элемента новым HTML-кодом, содержащим цветные слова. Я не вижу, как вы получаете доступ к элементам из вашего JavaScript, но то, что вы можете сделать, в основном это:

var element = ...; // if you want to get the element by ID: document.getElementById("your-element");
var originalHtml = element.innerHTML;
var newHtml = originalHtml.replace(_word, _word.fontcolor("red"));
element.innerHTML = newHtml;

Обратите внимание, что .replace заменяет только первое вхождение слова. Если вы хотите заменить все вхождения, вы можете использовать регулярное выражение:
var newHtml = originalHtml.replace(new RegExp(_word, "g"), _word.fontcolor("red")); // "g" means "global"

Также обратите внимание, что установка innerHTML свойство приводит к тому, что элемент теряет все обработчики событий. Поэтому, если у вас есть обработчики событий, привязанные к вашим"li" -элементам, то я рекомендую не помещать ваш текст сразу в li-тег, а в другой тег в теге li, например: <li><span>your text here</span></li>.

Ali Majed HA

Большое спасибо, ваше решение решило мою проблему, но не могли бы вы рассказать мне больше о вашей первой линии решения ? Вы имеете в виду, что использование createTextNode предотвращает визуализацию моего текста ?
заранее спасибо

Thomas Daniels

Моя первая строка означает: вы не должны использовать createTextNode. Он просто создает узел* text*, не понимая HTML. Так что это не сработает.

Рейтинг:
1

Peter Leow

Проверить и адаптировать:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Visit CodeProject!</p>

<button onclick="changeSubStringColor()">Try it</button>

<script>
function changeSubStringColor() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("CodeProject", "<span style='color:red'>CodeProject</span>");
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

Ali Majed HA

Спасибо за ваше решение. но решение programFOX решило мою конкретную проблему. Спасибо снова