Question

我正在创建一个jQuery插件。它需要用户输入，并应突出显示现有页面内容中的文本。现在，该插件突出显示整行，其中包括用户输入的内容。

理想情况下，它只匹配输入的短语。

我有三个文件：

HTML文件：

<input type="text" id="name">
<p>harry gambhir is sitting in oakville tim hortons drinking coffe </p>

PLUGIN FILE：

$(document).ready(function(){
(function ( $ ) {
$.fn.high = function(){
    $("#name").keyup(function(){
        var user = $(this).val();
        var hhh = $("p:contains('"+ user + "')").addClass('highlight');

    });
};
}(jQuery));
$('p').high();
});

CSS FILE：

.highlight{

    background-color:#000000;

}

也许我需要在字母表周围创建一个span标签然后添加类来突出显示它。我不知道如何为输入的文本分配span标签。如果有更好的解决方案，这只是一个想法，请告诉我。

Answer 1

尝试使用.html()，.text()，String.prototype.replace()，将html元素的原始p保存为变量以重置p元素{{1如果html返回空字符串

＆＃13;

.val()

＆＃13;

$(document).ready(function() {
  (function($) {
    // pass element selector to `.high()` 
    $.fn.high = function(elem) {
      // cache `this` element
      el = this;
      // save original `html` of `el`
      originalHTML = el.html();
      $(elem).keyup(function() {
        var user = $(this).val();
        // if `user` is not empty string
        if (user.length) {
          el.html(function(_, html) {
            return el.text()
                  .replace(new RegExp("(" 
                    + user.trim().split("").join("|") 
                    + ")"
                  , "g")
                   // replace matched character with `span` element
                   // add `highlight` `class` to `span` element
                   , "<span class=highlight>$1</span>")
          })
        } else {
          // reset `p` : `el` `html` to `originalHTML`
          el.html(originalHTML)
        }

      });
    };
  }(jQuery));
  $("p").high("#name"); // pass `#name` as selector to `.high()`
});

＆＃13;

.highlight {
  color: yellow;
  background-color: #000000;
}

＆＃13;

jQuery插件 - 突出显示文本

1 个答案: