@troi

Как выделить все символы русского алфавита на странице, при условии, что атрибуты некоторых элементов могут содержать его?

Как выделить все символы русского алфавита на странице, при условии, что атрибуты некоторых элементов могут содержать его?
Мои попытки решить задачу прилагаются:
<html>
	<head>
		<script type="text/javascript">
			function search_rus_symbol() 
				{
					document.getElementById('www1').innerHTML = document.getElementById('www1').innerHTML.replace(/(ext:qtip=")([а-яё\s]+)(")(\S)([а-яё\s]+)/gim,'<font color="red">$5</font>');
					//document.getElementById('www1').innerHTML = document.getElementById('www1').innerHTML.replace(/([а-яё])/gi,'<font color="red">$1</font>');
				}
		</script> 
	</head>
	<body onload="search_rus_symbol()" id="www1">
		<div>
			<table class="x-grid3-row-table" border="1" width="100%" cellpadding="5">
				<tr>
					<th>Ячейка 1</th>
					<th>Ячейка 2</th>
				</tr>
				<tr>
					<td>Ячейка 3</td>
					<td>Ячейка 4</td>
					<td class="x-grid3-col x-grid3-cell x-grid3-td-name " style="width:646px;" tabindex="-1">
						<div class="x-grid3-cell-inner x-grid3-col-name" ext:qtip="Текст атрибута">текст, у которого все русские символы должны быть красными</div>
					</td>
				</tr>
			</table>
		</div>
			<br>текст в боди после закрывающего тега див
	</body>
</html>
  • Вопрос задан
  • 112 просмотров
Решения вопроса 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
Нужно рекурсивно обойти всё DOM дерево и рассматривать только текстовые узлы. Регуляркой заменять один-или-несколько-подряд символов из кириллического алфавита (+пробелы, пожалуй) на них же, в обёртке из тега форматирования.
Примерно так
function replacer(el){
  var i, node, span;
  if(el.hasChildNodes()) {
    for(i=0; i<el.childNodes.length; i++) {
      node = el.childNodes[i];
      if(node.nodeType === Node.ELEMENT_NODE) {
        if( !!~['SCRIPT','NOSCRIPT'].indexOf(node.nodeName)) continue;
        replacer(node);
      } else if( node.nodeType === Node.TEXT_NODE) {
        if(node.nodeValue.match(/^\s+$/)) continue;
        span = document.createElement("span");
        span.innerHTML = node.nodeValue.replace(/([а-яА-Я]+)/ug, '<i>$1</i>');
        el.insertBefore(span, node);
        el.removeChild(node);
      }
    }
  }
}

replacer(document.body);

Тут для простосты схалтурил и вообще каждый текстовый узел заменяю на <span>, чтобы просто innerHTML ему заменить.

Fiddle
Ответ написан
Комментировать
lidacriss
@lidacriss
wtf
попробуйте такой "костыль":
let t = document.getElementById('www1');
// достаем потенциальные текстовые узлы
textNodes = t.innerHTML.match(/(>[^<>]*?)([а-яА-Яё]+)([^<>]*?<)/igm) || [];
// проходим по каждому регуляркой в цикле
textNodes.forEach(function(tNode){
  let repl = tNode.replace(/([а-яё]+)/igm, '<mark>$1</mark>');
  t.innerHTML = t.innerHTML.replace(tNode, repl);
});
Ответ написан
@kudis
Bitrix developer
Для Вашего примера работает вот такой вариант:
function search_rus_symbol()
{
    var arTexts = document.getElementById('www1').innerHTML.match(/>([^\<]*)/ig);
    var arItems = [];
    arTexts.forEach(function(item, key){
        arItems[key] = item.replace(/([А-Яа-я]+)/mg, '<font color="red">$1</font>');
    });
    arTexts.forEach(function(item, key){
        document.getElementById('www1').innerHTML = document.getElementById('www1').innerHTML.replace(item, arItems[key]);
    });
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы