Не важно для каких целей, но бывает так, что необходимо подсветить латинские буквы или цифры в тексте (контенте). В моем случае я использовал такой скрипт для выявления латинских букв среди кириллических в текстах принятых от рерайтеров, которые часто для повышения уникальности текстов лепили туда похожие на русские буквы цифры, и латинские буквы. За основу скрипта было взято это решение.
Скрипт будет работать только с подключенной 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 мы вставляли его просто в блок, который выводили под контентом на нужной нам странице.Результат выглядит примерно так:
- 19 просмотров