Javascript-форум - jQuery highlight plugin — подсветка слов в тексте

источник 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>