источник
jQuery highlight — подсветка слов в тексте или HTML и здесь на форуме
Поиск в тексте
скрипт переработан, избавлен от проблем с пустыми строками и выделения дважды уже выделенного, добавлены новые параметры.
Параметры (settings)
Параметры являются необязательными, заданы значения по умолчанию.
className — имя класса, которое проставляется элементу span, с помощью которого выделяются искомые слова.
По умолчанию — highlight
caseSensitive — зависит от регистра или нет.
По умолчанию — false, т.е. если передана строка «тест», в тексте будет выделено в том числе слово «ТЕСТ».
split — разделитель между словами.
По умолчанию — "\\s+" (пробел/пробелы), т.е. если передана строка «слово1 слово2″, будут выделены и «слово1″ и «слово2″.
strictly — искать точное совпадение с 'образцом'
По умолчанию — false, т.е. выделит полностью слово, а не часть его.
remove — убирать предыдущее выделение.
По умолчанию — true.
чтобы убрать выделение ввести только пробел/ы
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$.fn.highlight = function (b, k) {
function l() {
$("." + c.className).each(function (c, e) {
var a = e.previousSibling,
d = e.nextSibling,
b = $(e),
f = "";
a && 3 == a.nodeType && (f += a.data, a.parentNode.removeChild(a));
e.firstChild && (f += e.firstChild.data);
d && 3 == d.nodeType && (f += d.data, d.parentNode.removeChild(d));
b.replaceWith(f)
})
}
function h(b) {
b = b.childNodes;
for (var e = b.length, a; a = b[--e];)
if (3 == a.nodeType) {
if (!/^\s+$/.test(a.data)) {
var d = a.data,
d = d.replace(m, '<span class="' + c.className + '">$1</span>');
$(a).replaceWith(d)
}
} else 1 == a.nodeType && a.childNodes && (!/(script|style)/i.test(a.tagName) && a.className != c.className) && h(a)
}
var c = {
split: "\\s+",
className: "highlight",
caseSensitive: !1,
strictly: !1,
remove: !0
}, c = $.extend(c, k);
c.remove && l();
b = $.trim(b);
var g = c.strictly ? "" : "\\S*",
m = RegExp("(" + g + b.replace(RegExp(c.split, "g"), g + "|" + g) + g + ")", (c.caseSensitive ? "" : "i") + "g");
return this.each(function () {
b && h(this)
})
};
$(function () {
$('#scan').click(function () {
var settings = {};
var pattern = $('#pattern').val();
$("#right").prop("checked") && (settings.strictly = true);
$("#case").prop("checked") && (settings.caseSensitive = true);
$("#remove").prop("checked") && (settings.remove = false);
pattern && $("div").highlight(pattern, settings)
})
})
</script>
<style type="text/css">
body{
background-color: #FFFF42;
}
span.highlight {
color: #FFFFFF;
padding:0px 12px 2px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000CD), to(#DBDBFF));
background: -webkit-linear-gradient(left, #0000CD, #DBDBFF);
background: -moz-linear-gradient(left, #0000CD, #DBDBFF);
background: -o-linear-gradient(left, #0000CD, #DBDBFF);
background: -ms-linear-gradient(left, #0000CD, #DBDBFF);
background: linear-gradient(left, #0000CD, #DBDBFF);
background-color: #0000CD;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
} </style>
</head>
<body>
<div >
Вот только как организовать этот код ума не приложу)
Я мог бы взять и изменить допустим цвет всего абзаца
с указанным ID или еще какие то свойства целого
элемента. Но как взять и изменить отдельное слово
ума не приложу, по сути мне только этот момент и
нужно объяснить желательно на примере и с
коментариями. У меня цель не просто скопировать
готовый скрипт но еще и разобраться в нем что бы в
будущем таких вопросов не возникало. Вот объясните
мне как взять и организовать поиск слова на ВСЕЙ
странице и что бы после нахождения тут же
обратиться к свойству данной строки и изменить ее
цвет. Как я понял функция match() по идеи должна
заниматься поиском совпадений в строке но как при
этом цвет поменять? С этим я окончательно запутался.
</div>
<form>
<input id="pattern" name="" value="вот поиск слов"><label> слова через пробел|ы</label><br>
<input id="right" name="" type="checkbox"><label>точное совпадение</label><br>
<input id="case" name="" type="checkbox"><label>зависит от регистра</label><br>
<input id="remove" name="" type="checkbox"><label>не убирать предыдущее выделение</label><br>
<input id="scan" name="" type="button" value="scan">
</form>
</body>
</html>
