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

如果您曾经使用过 jquery，那么您很有可能也使用过它的无数插件中的至少一个。想想你想在 jQuery 中做的一些有用的事情，我几乎可以肯定有一个插件可以做到这一点。

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

基础知识

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

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

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

让我解释一下以使其更清楚。Using $.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，空字符串最有意义，因为如果用户没有设置替换值，也许他或她只是希望它为空。最合适的值是webpbackgroundColor时代的背景颜色，在大多数情况下是白色。如果用户忘记提供值，您还可以进行一些检查以通知用户。

为了使用这些值，我们还必须更改原始插件代码。我们的插件代码现在应该是：

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 const ructor 创建一个正则表达式对象。这可用于动态替换正则表达式。

使用全局修饰符可确保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);
  }
});

以下是该插件的运行截图：

在jQuery中创建查找和替换插件第1张
我正在发布我们插件的完整代码，以确保没有任何混淆：

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

Our final demo.