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

时间:2015-04-13 07:45:29

标签: javascript jquery regex meteor underscore.js

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

    }
})

我有上面的代码。

我尝试做的是匹配输入字段的值,然后匹配文本。我将函数添加到keyup,以便这是被动的。

当字段和文字匹配时,它会将bold tags添加到匹配的字符串(文本)。

我想我差不多了,但现在还没有。

我将如何从这里继续?

MeteorPad Here

1 个答案:

答案 0 :(得分:1)

在您的代码中,您似乎只匹配整个单词,尽管您的问题没有指定。如果您想匹配输入中的任何文本(例如,如果您键入&#34; a&#34;,则所有&#34;文本中的&#34; s将变为粗体) ,您可以使用javascript splitjoin字符串方法相对轻松地完成此操作:

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

值得注意的是,您必须使用{MenerPad示例中缺少的$('p#result').html()替换页面上的文本。另请注意,这是一个区分大小写的实现;您可以使用正则表达式来执行split,但是当您想要替换join中的文本时,它会变得更复杂一些。你可以在MeteorPad上玩它。

为了不区分大小写,分割非常简单 - 您可以像这样使用RegExp:

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

最棘手的事情是提取你想要提取的内容的正确案例,然后将其重新插入 - 你不能用一个简单的join做到这一点,所以你要做到这一点必须交错两个数组。您可以看到交错数组here的示例,它来自this question。我已经修改了一点来处理不均匀的数组长度,这里:

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

我还创建了另一个MeteorPad,您可以使用它完成所有这些操作。 lo是一个很好的测试字符串。