Javascript: изменение цвета каждого «r» в HTML-документе

Question

РЕДАКТИРОВАТЬ [как я могу] изменить цвет каждого R и R в моем HTML-документе с помощью JavaScript?

Answer 1

Я бы использовал плагин выделения для jQuery . Затем сделайте что-то вроде:

$('*').highlight('r'); // Not sure if it's case-insensitive or not

и в CSS:

.highlight { background-color: yellow; }

Answer 2

выполнимо, но не супер просто. Там нет CSS-способа сделать это.

По сути, вам нужно использовать Javascript и выполнять итерацию по всем узлам. Если это текстовый узел, вы можете найти его для «R» и затем заменить R на <span style="color:red">R</span>

Я, очевидно, немного упрощаю это, вероятно, лучше просто динамически добавить класс "highlight", чем жестко кодировать стиль, и определить его в CSS. Точно так же я уверен, что вы захотите параметризовать строку поиска. Кроме того, это не учитывает, что такое текстовый узел, например, у меня есть специальная обработка для пропуска комментариев, но вы, вероятно, обнаружите, что есть другие вещи (узлы сценария?), Которые также необходимо пропустить.

 function updateNodes(node) { 
   if (node.nextSibling)
     updateNodes(node.nextSibling);
   if (node.nodeType ==8) return; //Don't update comments
   if (node.firstChild)
      updateNodes(node.firstChild);
   if (node.nodeValue) { // update me    
       if (node.nodeValue.search(/[Rr]/) > -1){ // does the text node have an R
               var span=document.createElement("span");
               var remainingText = node.nodeValue;
               var newValue='';
               while (remainingText.search(/[Rr]/) > -1){ //Crawl through the node finding each R
                 var rPos = remainingText.search(/[Rr]/);
                 var bit = remainingText.substr(0,rPos);
                 var r = remainingText.substr(rPos,1);
                 remainingText=remainingText.substr(rPos+1);
                 newValue+=bit;
                 newValue+='<span style="color:red">';
                 newValue+=r;
                 newValue+='</span>';
               }
               newValue+=remainingText;
               span.innerHTML=newValue;
               node.parentNode.insertBefore(span,node);
               node.parentNode.removeChild(node);   
            } 
        }
     } 

        function replace(){   updateNodes(document.body); 
}

Answer 3

Плагин выделения для jQuery является одним из вариантов. Другой вариант, особенно с завтрашнего дня, возможно, вы захотите расширить подсветку на ключевые слова или другие термины - это использовать класс Google Closure goog.dom.annotate. Прелесть этого класса в том, что он на самом деле будет правильно и ТОЛЬКО анализировать дерево аннотировать соответствующие условия. Это также позволит вам ИСКЛЮЧИТЬ элементы или элементы с определенными классами.

Общая проблема с аннотациями в том, что вы можете испортить свой HTML, если не будете осторожны.

Например, «простое решение, опубликованное выше»

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
.replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html; 

, безусловно, будет также захватывать термины в любых атрибутах стиля. Если у вас было это:

<p class="red">text......</p>

Это станет

<p class="<span class="red">r</span>ed .....

это сломает ваш html.

Как правило, анализ DOM выполняется «медленно», поэтому постарайтесь избегать аннотирования всего тела веб-страницы, спросите себя, почему вам нужно только выделить буквы R? На самом деле мне любопытно, почему вы хотите аннотировать буквы?:)

Answer 4

Простое решение JS без необходимости использования библиотеки JS 20 КБ:

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
               .replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html; // note that you will lose all
                       // event handlers in this step...

Answer 5

Да, это возможно с небольшим Javascript, небольшим количеством CSS и некоторыми регулярными выражениями.

Во-первых, вам нужно определить стиль, который обеспечивает требуемый цвет (в моем примере ниже я ссылаюсь на класс CSS под названием «new-color»), а затем выполнить некоторое регулярное выражение для вашего HTML-контента, который выполняет поиск и заменить. Вы хотите изменить все символы 'r' и 'R' на что-то вроде этого (в качестве примера):

<span class="new-colour">r</span>

Если вы не знаете регулярных выражений, есть множество ресурсов, которые помогут вам начать. Вам будет приятно узнать, что ваше требование очень простое, поэтому не беспокойтесь. Вот пара ссылок:

regexlib.com

8 регулярных выражений, которые вы должны знать

Answer 6

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

например. Преобразуйте текстовый узел "art" в "a<span class="colored">r</span>t". Это добавляет два новых текстовых узла, "r" и "t", и новый элемент span.