Перейти к основному содержанию
Скрипт подсветки латинских букв и цифр в тексте

Не важно для каких целей, но бывает так, что необходимо подсветить латинские буквы или цифры в тексте (контенте). В моем случае я использовал такой скрипт для выявления латинских букв среди кириллических в текстах принятых от рерайтеров, которые часто для повышения уникальности текстов лепили туда похожие на русские буквы цифры, и латинские буквы. За основу скрипта было взято это решение.

Скрипт будет работать только с подключенной Jquery библиотекой, и предварительно, чтобы подсветка работала, в CSS нужно создать соответствующие классы:

.highlight {
	color: red;
	background-color: yellow;
}
.highlightz {
	color: blue;
	background-color: gold;
}

ну и вот сам скрипт:

<script type="text/javascript">
jQuery.fn.highlight = function(pat) {
	function innerHighlight(node, pat) {
		var skip = 0;
		if (node.nodeType == 3) {
		var pos = node.data.toUpperCase().indexOf(pat);
		if (pos >= 0) {
			var spannode = document.createElement('span');
			spannode.className = 'highlight';
			var middlebit = node.splitText(pos);
			var endbit = middlebit.splitText(pat.length);
			var middleclone = middlebit.cloneNode(true);
			spannode.appendChild(middleclone);
			middlebit.parentNode.replaceChild(spannode, middlebit);
			skip = 1;
		}
		}
		else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
			for (var i = 0; i < node.childNodes.length; ++i) {
				i += innerHighlight(node.childNodes[i], pat);
			}
		}
		return skip;
	}
	return this.each(function() {
		innerHighlight(this, pat.toUpperCase());
	});
};
jQuery.fn.removeHighlight = function() {
	return this.find("span.highlight").each(function() {
		this.parentNode.firstChild.nodeName;
		with (this.parentNode) {
			replaceChild(this.firstChild, this);
			normalize();
		}
	}).end();
};
jQuery.fn.selectHighlight = function(number) {
	return 
;
};
jQuery.fn.selectHighlightz = function(number) {
	return this.find("span.highlightz:eq("+number+")").addClass('selectHighlightz').end();
};
(function($){
$(document).ready(function(){
  $('#main').highlight('0');
  $('#main').highlight('1');
  $('#main').highlight('2');
  $('#main').highlight('3');
  $('#main').highlight('4');
  $('#main').highlight('5');
  $('#main').highlight('6');
  $('#main').highlight('7');
  $('#main').highlight('8');
  $('#main').highlight('9');
  
  $('#main').highlightz('a');
  $('#main').highlightz('b');
  $('#main').highlightz('c');
  $('#main').highlightz('d');
  $('#main').highlightz('e');
  $('#main').highlightz('f');
  $('#main').highlightz('g');
  $('#main').highlightz('h');
  $('#main').highlightz('i');
  $('#main').highlightz('j');
  $('#main').highlightz('k');
  $('#main').highlightz('l');
  $('#main').highlightz('m');
  $('#main').highlightz('n');
  $('#main').highlightz('o');
  $('#main').highlightz('p');
  $('#main').highlightz('q');
  $('#main').highlightz('r');
  $('#main').highlightz('s');
  $('#main').highlightz('t');
  $('#main').highlightz('u');
  $('#main').highlightz('v');
  $('#main').

this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end();
};
jQuery.fn.highlightz = function(pat) {
	function innerHighlightz(node, pat) {
		var skip = 0;
		if (node.nodeType == 3) {
		var pos = node.data.toUpperCase().indexOf(pat);
		if (pos >= 0) {
			var spannode = document.createElement('span');
			spannode.className = 'highlightz';
			var middlebit = node.splitText(pos);
			var endbit = middlebit.splitText(pat.length);
			var middleclone = middlebit.cloneNode(true);
			spannode.appendChild(middleclone);
			middlebit.parentNode.replaceChild(spannode, middlebit);
			skip = 1;
		}
		}
		else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
			for (var i = 0; i < node.childNodes.length; ++i) {
				i += innerHighlightz(node.childNodes[i], pat);
			}
		}
		return skip;
	}
	return this.each(function() {
		innerHighlightz(this, pat.toUpperCase());
	});
};

jQuery.fn.removeHighlightz = function() {
	return this.find("span.highlightz").each(function() {
		this.parentNode.firstChild.nodeName;
		with (this.parentNode) {
			replaceChild(this.firstChild, this);
			normalize();
		}
	}).end()

highlightz('w');
  $('#main').highlightz('x');
  $('#main').highlightz('y');
  $('#main').highlightz('z');
});
})(jQuery);
</script>

Куда вставлять такой код зависит от CMS. В Drupal мы вставляли его просто в блок, который выводили под контентом на нужной нам странице.Результат выглядит примерно так:

tekst_s_podsvetkoy.png

Об авторе

Автор этого блога. В SEO более 10 лет. Кроме SEO интересуюсь всем, что связано с технологиями и заработком в интернете, о чем и стараюсь делиться с читателями.