JavaScript: заменить Определить строку и заменить HTML в div после изменения цвета

0

Я пытаюсь изменить цвет части строк. У меня есть список элементов DOM, и для каждого из них текст может содержать некоторые хэштеги. Я хотел бы поместить в цвет все слова хэштегов, которые можно найти в тексте.

Вот начало кода:

var listOfText = document.getElementsByClassName("titleTweet");
                        for (var nodetext in listOfText) {
                            var divContent = listOfText[nodetext].innerHTML;
                            if (divContent.indexOf("#") !== -1) {
                                // Do job here
                            }
                        }

Например, divContent может быть равен " Привет, мои друзья #! Как вы? "

Я хотел бы обновить элементы dom, чтобы добавить красным цветом слово " #friends ".

Я не знаю, как это сделать с помощью javascript или jQuery.

  • 1
    заключить конкретную подстроку в любой встроенный тег блока как span, это общая идея
Теги:

3 ответа

2
Лучший ответ

Вы можете использовать регулярное выражение, чтобы найти hastags и обернуть их html. Затем используйте метод.html(), чтобы заменить исходный элемент html на новую строку.

Пример фрагмента

$('#myDiv').replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));

Рабочий пример - http://jsfiddle.net/4p4mA/1/

Отредактирован пример работы во всех div на странице.

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

Поделиться
  • 0
    Это работает, но только для первого элемента, найденного JQuery. Как я могу сделать это для всех id?
  • 0
    В чем вы храните текст? Другой селектор поможет вам заменить различные элементы. Например, $ ('div') соответствует всем элементам div на странице, а $ ('div.hashtag') соответствует всем элементам div с хэштегом класса.
Показать ещё 5 комментариев
1

используйте regex для этого, найдите текст, имеющий hashtag, и замените его в теге span для каждого элемента.

$('.titleTweet').each(function(){
    var $this=$(this);
$this.html($this.text()
                .replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
});

Смотрите демо здесь

Поделиться
0

.innerHTML - это плохая основа для начала замены текста. Вы хотите перейти к текстовым узлам и использовать .nodeValue для получения текста. Затем вы можете начать разделение текстовых узлов.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню