在jQuery中创建查找和替换插件

如果您曾经使用过jQuery，则很有可能还使用了至少一个无数的插件。 只要考虑一下您想在jQuery中做的有用的事情，并且我几乎可以肯定有一个插件可以做到这一点。

有时，当一个插件不存在时，您可能必须自己创建一个。 它并不像听起来那么难。 在本教程中，我将介绍创建插件时需要遵循的一些常规规则，稍后我们将创建自己的查找和替换插件。

基础

开发插件时，需要注意一些事项。 在本节中，我将一一介绍所有这些内容。 考虑以下代码片段：

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

首先，您可能已经注意到我在插件中使用的是this而不是$(this) 。 这是因为$.fn使functionName与.addClass()方法属于同一jQuery对象。

让我解释一下，使其更清楚。 使用$.fn总是返回一个jQuery对象，其中包含您在jQuery中使用的所有方法。 如果您创建了自己的方法，它们也将成为该对象的一部分。 由于您的函数现在是jQuery对象的一部分，因此可以使用this代替$(this) 。

其次，您应该尝试使插件可链接。 这是开发人员一直使用的jQuery的许多重要功能之一。 为了使方法可链接，它应该返回原始的jQuery对象。 可以像我在上面的代码中那样通过附加return来实现。

最后，您应该保护$别名，并确保将插件与其他JavaScript代码一起使用不会引起任何冲突。 您只需要做的就是将函数包装在立即调用的函数表达式中，就像上面的代码一样，以确保不会发生这种情况。

创建插件

借助基础知识，我们可以专注于主要任务，即创建插件。 我们从原始版本开始，在原始版本中，我们将原始文本替换为一些预定义的文本。 这是执行此操作的代码：

(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({
    // These are the defaults.    
    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)
  );
});

可以使用setting.findText访问需要查找的文本。 它存储在变量中，以备后用。 我正在使用RegExp构造函数创建正则表达式对象。 这可用于动态替换正则表达式。

使用全局修饰符可确保替换所有出现的StringToFind 。 我已经用内联样式将替换文本包含在span元素中。 最后，我更新了调用findReplace函数的元素HTML。

该演示演示了我们的插件的运行情况。

进行改进

我们漂亮的小插件可以完美运行。 您可以进行一些修改，使其更加出色。 我们已经提供了更改替换元素的背景颜色的选项。

但是，如果用户决定更改字体大小，添加一些填充或进行其他更改，则不能。 提供所有这些选项也是不切实际的。 相反，我们要做的是使用户能够将自己选择的类添加到被替换的元素中。 这样，他们可以自己在CSS中进行更改，我们的插件也将是轻量级的。

您所要做的就是在相应位置将我们较早版本中的backgroundColor选项更改为customClass 。

var settings = $.extend({
  findText: null,
  replaceText: "",
  backgroundColor: "#FFF"
}, options);
// Should Now Be
var settings = $.extend({
  findText: null,
  replaceText: "",
  customClass: ""
}, options);


var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
// Should Now Be
var replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";

插件完成工作后，某些插件用户可能会对调用回调函数感兴趣。 这是相当容易实现的。 您只需要添加completeCallback选项即可从用户那里获取回调函数。 然后，下面的代码将处理其余的工作：

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);
  }
});

这是运行中的插件的屏幕截图：

我将发布我们插件的完整代码，以确保没有任何混淆：

(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));

我们的最终演示 。

最后的想法

在jQuery中创建插件并不难。 您只需要遵循一些基本规则，就可以了。

如果您对我们提供的其他一些插件以及您在任何现有项目中可以为您做的事情感兴趣，那么请查看我们在市场上拥有的jQuery工作 。

我建议的一件事是使插件尽可能灵活，并使其尺寸尽可能小。 没有人会使用仅查找和替换文本的15k插件。

最后，希望您喜欢本教程，如果对本教程有任何疑问，请在评论中告诉我。

翻译自: https://code.tutsplus.com/tutorials/create-a-find-and-replace-plugin-in-jquery--cms-25920