gpt4 book ai didi

javascript - RegEx 忽略包含在(方括号)中的字符串值;并在清除输入框时删除标记

转载 作者:行者123 更新时间:2023-11-29 19:38:58 26 4
gpt4 key购买 nike

我需要你的帮助,

  1. 下面的 JavaScript 代码用于在 UL LI 列表中查找给定的匹配项,并将其与输入框的匹配项进行比较。我的问题有两个方面,虽然它有效,但它似乎忽略了任何括号中包含的任何值;

  2. 即使清除了输入框,代码似乎仍然突出显示搜索结果(匹配项)。如果用户没有搜索任何内容,则应删除标记标签。

如何修改代码以适应上述两个条件?

这是一个 fiddle :http://jsfiddle.net/z4TMC/4/

有问题的代码:

$("#refdocs").keyup(function(){

var search = $(this).val();

$("#refdocs_list li").each(function(){

var val = $(this).text();

if (val.toLowerCase().indexOf(search) >= 0 && search.length) {
//$(this).addClass("selected");
$(this).html(val.replace(RegExp("("+search.replace(/[\-$*{}()]/g,"\\$1")+")","ig"), "<mark>$1</mark>" ));
}
else {

$(this).removeClass("selected");
}

});
});

最佳答案

您的正则表达式还不完美。您没有替换/转义方括号 ([]),也没有正确转义可能已输入的任何反斜杠。我已经设置了 this working fiddle
我所要做的就是添加一个监听器来处理鼠标输入事件,并稍微更改一下正则表达式:

//add this, change triggers when focus is lost, though, but handles empty fields
$("#refdocs").on('change', function()
{
if (this.value == '')
$("#refdocs_list li").each(function()
{
this.innerHTML = $(this).text();
});
else
$(this).trigger('keyup');//run keyup handler if required

});

我还注意到,对于列表项之一 (XAF-2014-123456),如果用户输入大写,您的代码将无法匹配 XAF。那是因为你的 if 条件:

if (val.toLowerCase().indexOf(search) >= 0 && search.length)
{//val.toLowerCase() -> also lowerCase the user input to ensure same case!

我只是将其更改为:

if (val.toLowerCase().indexOf(search.toLowerCase()) >= 0 && search.length)
{//lower-case to lower-case comparison, XAF and xaf both work now.

现在是正则表达式:

search.replace(/[-\\$*{}()[]]/g,"\\$1")

请注意我是如何将 - 移动到字符类的前面的。就是为了不需要转义。
接下来,为了过滤掉用户可能输入的任何反斜杠,我匹配了一个 \\(一个转义的反斜杠匹配一个文字 \)。
字符类的其余部分几乎相同,但就在结尾附近(结束 ]),我还添加了 [],以匹配方括号。通常,您会避开它们,但在这种情况下,没有歧义。比较一下:

/ambi[a-z[]0-9]/g

在这里,有多种解释正则表达式的方法: a-z+ 0-9[] 文字的 char 类,或格式错误的模式,字符类为 a-z[,一个数字和一个尾随 ]... 但是,[{}[]] 显然是一个匹配大括号或​​方括号的字符类。不过,如果您想安全起见,添加反斜杠没有任何区别:

/[-\\$*{}()\[\]]/g

更新
虽然这不是您要找的东西:您评论说您想支持 IE10。自 IE9 以来,IE 一直在缓慢但肯定地越来越符合其他浏览器所支持的标准。因此,以 X 浏览器兼容的方式编写代码,同时保持 X 浏览器的兼容性是完全可行且非常容易的。
我不太喜欢 jQ(我发现它体积大、速度慢,而且使用方式的次数超过了应有的水平)这已经不是什么大 secret 了。因此,我继续将 this fiddle 放在一起,它向您展示了您尝试做的事情的 VanillaJS 方法。它的边缘仍然有点粗糙,但您应该能够立即启动并运行它。

在这段代码中,我使用了“聪明”(高效)技术,例如闭包/IFFE(存储 DOM 引用,避免过多的 DOM 查找)和事件委托(delegate).谷歌这些术语并弄清楚这段代码是如何运作的。如果你愿意,那就是。不过我向你保证:这是值得的,你会发现那里的大部分 jQ 代码都非常可怕。
无论如何,对于那些关心的人:这是代码:

(function(refdoc)
{
var listItems = document.querySelectorAll('#refdocs_list li'),
wrapper = document.querySelector('#refdocs_list'),
classPattern = /\bselected/,
callback = function(e)
{
var i;
for (i=0;i<listItems.length;++i)
listItems[i].innerHTML = listItems[i].textContent;
if (!this.value)
return e;
for (i=0;i<listItems.length;++i)
if (listItems[i].textContent.toLowerCase().indexOf(this.value.toLowerCase()) >= 0)
listItems[i].innerHTML = listItems[i].textContent.replace(new RegExp("("+this.value.replace(/[-\\$*{}()[]]/g,"\\$1")+")","ig"), "<mark>$1</mark>" );
};
wrapper.addEventListener('click', function(e)
{
var i, t = (e = e || window.event).target || e.srcElement;
if (t.tagName.toLowerCase() === 'li')
{
for (i=0;i<listItems.length;++i)
{
listItems[i].innerHTML = listItems[i].textContent;
listItems[i].className = listItems[i].className.replace(classPattern, '');
}
t.className += ' selected';
refdoc.value = t.textContent;
}
}, false);
refdoc.addEventListener('keyup', callback, false);
refdoc.addEventListener('change', callback, false);
}(document.querySelector('#refdocs')));

您需要做的就是将其放入 window.addEventListener('load', function(){/*code here */}, false); 回调中,就是这样。

关于javascript - RegEx 忽略包含在(方括号)中的字符串值;并在清除输入框时删除标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24142316/

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