jQuery插件-突出显示文本

Question

I'm creating a jQuery plugin. It takes user input and should highlight the text in the existing page content. Right now, the plugin is highlighting the entire line which includes the content entered by the user.

Ideally it only matches the entered phrase.

I have three files:

HTML FILE :

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

}

Maybe I need to create a span tag around the alphabet then add the class to highlight it. I do not know how to assign a span tag to the entered text. This is just an idea if there is a better solution then please let me know.

Answer 1

Try using .html() , .text() , String.prototype.replace() , saving original html of p element as variable to reset p element html if .val() returns empty string

 $(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()` }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <input type="text" id="name"> <p>harry gambhir is sitting in oakville tim hortons drinking coffe</p>