将输入字符串匹配到文本/元素并突出显示反应式

Question

HTML(JADE)

p#result Lorem ipsum is javascript j s lo 1 2 4 this meteor thismeteor. meteor
input.search

JS

Template.pg.events({
    'keyup .search': function(e){
        e.preventDefault();

        var text = $('p#result').text();
        var splitText = text.match(/\S+\s*/g);
        var input = $(e.target).val();
        var splitInput = input.match(/\S+\s*/g);

        if(_.intersection(splitText, splitInput)) {
            var match = _.intersection(splitText, splitInput);
            var matchToString = match.toString();
        $('p#result').text().replace(matchToString, '<b>'+matchToString+ '</b>')
        }

        console.log(splitText); //check what I get
        console.log(splitInput); //check what I get

    }
})

I have the above code.

What I'm trying to do is matching the input field's value, and then matching the text. I added it the function to keyup so that this is reactive.

When the fields and text match, it will add bold tags to the matched strings (texts).

I think I'm almost there, but not quite yet.

How would I proceed on from here?

MeteorPad Here

Answer 1

In your code, you seem to only be matching on whole words, although your question does not specify that. If you want to match on any text in the input (eg, if you type "a", all "a"s in the text are made bold), you can do that relatively easily using the javascript split and join String methods:

Template.pg.events({
    'keyup .search': function(e){
        e.preventDefault();

        var text = $('p#result').text();
        var input = $(e.target).val();
        var splitText = text.split(input); // Produces an array without whatever's in the input
        console.log(splitText);
        var rep = splitText.join("<b>" + input + "</b>"); // Produces a string with inputs replaced by boldened inputs
        console.log(rep);
        $('p#result').html(rep);
    }
});

Notably, you have to replace the text on the page using $('p#result').html() , which was missing in your MeteorPad example. Note also that this is a case-sensitive implementation; you can use a regex to do the split , but it gets a bit more complicated when you want to replace the text in the join . You can play around with it on this MeteorPad .

To do this case-insensitively, the split is very straightforward -- you can use a RegExp like so:

...
var regex = new RegExp($(e.target).val(), 'gi'); // global and case-insensitive, where `input` used to be

The tricky thing is to extract the correct case of what you want to pull out, then put it back in -- you can't do this with a simple join , so you'll have to interleave the two arrays. You can see an example of interleaved arrays here , which was taken from this question . I've amended that a bit to deal with the uneven array lengths, here:

var interleave = function(array1, array2) { 
  return $.map(array1, function(v, i) { 
    if (array2[i]) { return [v, array2[i]]; } // deals with uneven array lengths
    else { return [v]; }
  });
}

I've also created another MeteorPad that you can play around with that does all of this. lo is a good test string to check out.