... нагуглено и модернизировано ...
Поиск в тексте...почти рабочий код)))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery.fn.highlight = function (d, g) {
function f(a, c) {
if (3 == a.nodeType) {
var e = jQuery("<div><\/div>").text(a.data).html();
jQuery(a).replaceWith(e.replace(h, '<span class="' + b.className + '">$1<\/span>'))
} else if (1 == a.nodeType && a.childNodes && !/(script|style|img|input)/i.test(a.tagName) && a.className != b.className)
for (var e = a.childNodes.length, d; d = a.childNodes[--e];) f(d, c)
}
var b = {
split: " ",
className: "highlight",
caseSensitive: !1,
strictly: !1,
remove: !0
}, b = jQuery.extend(b, g);
b.remove && $("." + b.className).each(function () {
$(this).replaceWith($(this).text())
});
var c = b.strictly ? "" : "\\S*",
h = RegExp("(" + c + d.replace(RegExp(b.split, "g"), c + "|" + c) + c + ")", (b.caseSensitive ? "" : "i") + "g");
return this.each(function () {
f(this, d)
})
};
</script>
<style type="text/css">
span.highlight {color:red}
</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">
<script>
$('#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>
</form>
</body>
</html>