Как создать плагин поиска и замены в JQuery

Дата публикации: 2016-05-25

От автора: если вы когда-либо пользовались библиотекой JQuery, есть большая вероятность того, что вы также использовали какие-либо из ее плагинов. Просто представьте себе какой-либо полезный процесс, который вы хотели бы автоматизировать через JQuery, и почти со стопроцентной вероятностью вы найдете плагин для решения данной проблемы.

Иногда если плагина нет, его можно создать вручную. Это не так сложно, как звучит со стороны. В этом уроке я расскажу про основные правила, которые необходимо соблюдать при создании плагинов, а потом мы создадим свой плагин поиска и замены.

Основные моменты

Если вы хотите создать свой плагин, вам нужно знать несколько вещей. В этой секции я расскажу про все аспекты по очереди. Сначала разберем код ниже:

(function ( $ ) {
    $.fn.functionName = function() {
        return this.addClass("my-class");
    };
}( jQuery ));

(function ( $ ) {

$.fn.functionName = function() {

return this.addClass("my-class");

};

}( jQuery ));

Первое, что может привлечь ваше внимание в плагине, это this вместо $(this). Это объясняется тем, что $.fn делает functionName частью одного и того же JQuery объекта, что и метод .addClass().

Проясню ситуацию. $.fn всегда возвращает JQuery объект, в котором хранятся все методы JQuery. Если вы создавали свои собственные методы, то они также являются частью этого объекта. Так как ваша функция теперь является частью объекта JQuery, то вы можете использовать просто this, а не $(this).

Второе, вы должны попробовать сделать свой плагин цепным – одна из важнейших особенностей в JQuery, которой разработчики постоянно пользуются. Чтобы метод можно было прицепить, он должен возвращать объект JQuery. Сделать это можно добавлением в конец кода return, как я сделал это выше.

И последнее, необходимо защитить символ $ и убедиться, что ваш плагин не будет конфликтовать с другим кодом JS. Чтобы исключить все возможные конфликты, необходимо обернуть функцию синтаксисом немедленного выполнения функций, как показано в коде выше.

Как создать плагин

Поняв основы, можно сосредоточиться на основной задаче, т.е. создании плагина. Мы начнем с примитивной версии – мы будем заменять оригинальный текст заранее подготовленным текстом. Код:

(function($) {
  $.fn.findReplace = function(options) {
    return this.each(function() {
      $(this).html(
        $(this).html().replace(/Lorem Ipsum/g, "Replacement")
      );
    });
  };
}(jQuery));

(function($) {

$.fn.findReplace = function(options) {

return this.each(function() {

$(this).html(

$(this).html().replace(/Lorem Ipsum/g, "Replacement")

);

});

};

}(jQuery));

Для замены всех вхождений «Lorem Ipsum» в текст на «Replacement» я использовал регулярное выражение. Откровенно говоря, в такой форме наш плагин полностью бесполезен. Пользователи должны иметь хотя бы возможность находить какой-то текст и заменять его на любой другой.

Тут нам приходит на помощь возможность принимать различные варианты. Мы дадим пользователям три опции: поиск текста, замена текста и возможность задать фон для замененного текста. Эту возможность также можно использовать для назначения значений по умолчанию для различных параметров в случае, если они не были заданы пользователем по знанию или незнанию. Код:

var settings = $.extend({
    // Значения по умолчанию.    
    findText: null,
    replaceText: "",
    backgroundColor: "#FFF"
}, options);

var settings = $.extend({

// Значения по умолчанию.

findText: null,

replaceText: "",

backgroundColor: "#FFF"

}, options);

Параметр findText задан в null. Для параметра replaceText наиболее подходящим значением по умолчанию будет пустая строка, так как если пользователь оставил заменяемую строку пустой, может, он так и хочет. Для параметра backgroundColor лучше всего подходит цвет веб-страницы, который в большинстве случаев белый. Также можно добавить пару проверок и сообщать пользователю об ошибках, если он забыл задать некоторые значения.

Нам придется изменить наш плагин, чтобы он использовал данные значения. Теперь код выглядит так:

return this.each(function() {
  var StringToFind = settings.findText; 
  var regExpression = new RegExp(StringToFind, "g");
  var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
  $(this).html(
    $(this).html().replace(regExpression, replacement)
  );
});

return this.each(function() {

var StringToFind = settings.findText;

var regExpression = new RegExp(StringToFind, "g");

var replacement = "" + settings.replaceText + "";

$(this).html(

$(this).html().replace(regExpression, replacement)

);

});

Текст для поиска можно найти с помощью setting.findText, значение хранится в переменной для последующего использования. Для создания объекта регулярного выражения я использовал RegExp конструктор, который можно использовать для динамической замены регулярных выражений.

Глобальный модификатор гарантирует, что все вхождения StringToFind в тексте будут заменены. Заменяемый текст я обернул в тег span с встроенными стилями. И в конце я обновляют HTML код элемента, на который была вызвана функция findReplace.

В демо можно посмотреть наш плагин в действии.

Улучшаем плагин

Наш небольшой плагин прекрасно работает, но можно сделать его еще лучше, добавив пару модификаций. Мы уже добавили в него возможность изменения цвета фона заменяемого текста.

Но вот изменить размер шрифта, добавить внутренние отступы или внести другие изменения пользователи не могут. Да и практически невозможно добавить все эти опции. Вместо этого мы позволим пользователю добавлять классы к замененному тексту. Так через CSS они смогут сами изменять текст по своему желанию, а наш плагин станет легче.

Для этого нужно всего лишь заменить backgroundColor в нашей ранней версии на customClass в соответствующих местах.

var settings = $.extend({
  findText: null,
  replaceText: "",
  backgroundColor: "#FFF"
}, options);
// теперь будет
var settings = $.extend({
  findText: null,
  replaceText: "",
  customClass: ""
}, options);
 
 
var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
// теперь будет
var replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";

var settings = $.extend({

findText: null,

replaceText: "",

backgroundColor: "#FFF"

}, options);

// теперь будет

var settings = $.extend({

findText: null,

replaceText: "",

customClass: ""

}, options);

var replacement = "" + settings.replaceText + "";

// теперь будет

var replacement = "" + settings.replaceText + "";

Пользователям вашего плагина может понадобиться вызов колбэк функции после отработки плагина. Сделать это довольно просто. Нужно всего лишь добавить опцию completeCallback, а код ниже побеспокоится обо всем остальном:

if ($.isFunction(settings.completeCallback)) {
  settings.completeCallback.call(this);
}

if ($.isFunction(settings.completeCallback)) {

settings.completeCallback.call(this);

}

В коде выше метод .isFunction проверяет, а передал ли пользователь функцию на выполнение. Для вызова пользовательской функции, нашу функцию нужно вызывать следующим образом:

$("a").findReplace({
  findText: "Lorem Ipsum",
  replaceText: "I was replaced too!",
  customClass: "match-link",
  completeCallback: function() {
    $('.notification').text('Executed the plugin on all links').fadeOut(5000);
  }
});

$("a").findReplace({

findText: "Lorem Ipsum",

replaceText: "I was replaced too!",

customClass: "match-link",

completeCallback: function() {

$('.notification').text('Executed the plugin on all links').fadeOut(5000);

}

});

Скриншот работы плагина:

Чтобы вы не запутались, я выкладываю конечный код плагина:

(function($) {
  $.fn.findReplace = function(options) {
 
    var settings = $.extend({
      findText: null,
      replaceText: "",
      customClass: "",
      completeCallback: null
    }, options);
    return this.each(function() {
      var StringToFind = settings.findText;
      var regExpression = new RegExp(StringToFind, "g");
      var replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";
      $(this).html(
        $(this).html().replace(regExpression, replacement)
      );
 
      if ($.isFunction(settings.completeCallback)) {
        settings.completeCallback.call(this);
      }
    });
  };
}(jQuery));

(function($) {

$.fn.findReplace = function(options) {

var settings = $.extend({

findText: null,

replaceText: "",

customClass: "",

completeCallback: null

}, options);

return this.each(function() {

var StringToFind = settings.findText;

var regExpression = new RegExp(StringToFind, "g");

var replacement = "" + settings.replaceText + "";

$(this).html(

$(this).html().replace(regExpression, replacement)

);

if ($.isFunction(settings.completeCallback)) {

settings.completeCallback.call(this);

}

});

};

}(jQuery));

Итоговое демо

Заключительные мысли

В JQuery очень легко создавать плагины. Всего-то нужно соблюдать парочку основных правил, и все будет хорошо. Я посоветую лишь делать свой плагин как можно более гибким и легковесным. Никто не будет использовать плагин, весящий 15Кб, который всего-то и делает, что находит и заменяет текст. Надеюсь, этот урок вам понравился, и если у вас возникли вопросы, пишите об этом в комментариях.

Автор: Monty Shokeen

Источник: //code.tutsplus.com/

Редакция: Команда webformyself.

Метки: jquery плагин