gpt4 book ai didi

javascript - 将输入字符串与文本/元素匹配并突出显示 react 性

转载 作者:行者123 更新时间:2023-12-03 10:21:41 29 4
gpt4 key购买 nike

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 中,以便它是 react 性的。

当字段和文本匹配时,它会在匹配的字符串(文本)中添加粗体标签

我想我已经快到了,但还没有完全实现。

我将如何继续?

MeteorPad Here

最佳答案

在您的代码中,您似乎只匹配整个单词,尽管您的问题没有指定这一点。如果您想匹配输入中的任何文本(例如,如果您键入“a”,文本中的所有“a”都会变为粗体),您可以使用 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);
}
});

值得注意的是,您必须使用 $('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 ,取自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 是一个值得检查的很好的测试字符串。

关于javascript - 将输入字符串与文本/元素匹配并突出显示 react 性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29600258/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com