将输入字符串与 text/element 匹配并突出显示反应式

Question

HTML(翡翠)

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

Answer 1

在你的代码中，你似乎只匹配整个单词，尽管你的问题没有具体说明。如果您想匹配输入中的任何文本（例如，如果您键入 "a"，文本中的所有 "a" 都会变为粗体），您可以使用 javascript split 和 join 字符串方法相对容易地做到这一点：

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

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

要不区分大小写地执行此操作，拆分非常简单——您可以像这样使用 RegExp：

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

棘手的事情是提取你想要取出的东西的正确大小写，然后把它放回去——你不能用简单的 join 做到这一点，所以你必须交错两个数组。您可以看到交错数组的示例 here, which was taken from 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 是一个很好的测试字符串。

将输入字符串与 text/element 匹配并突出显示反应式

Match String of Input to text/element and highlight reactive

javascript

regex

jquery

underscore.js

meteor