html不识别正则表达式,关于jquery：与javascript中的html标记不匹配的正则表达式

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:

highlight words in html using regex & javascript - almost there

更新->最终的脚本一经解析，即为：

var regex;

var filterSize;

function normalizar(str) {

var fin=str.toLowerCase().replace('á','a').replace('é','e').replace('í','i').replace('ó','o').replace('ú','u');

return fin;

}

function highlight(fin) {

htmlFin="";

while ((match = regex.exec(normalizar(fin))) != null) {

posIni=match.index;

posEnd = posIni+filterSize;

var ini="";

if (posIni != 0) ini=fin.substring(0, posIni);

var sub=fin.substring(posIni, posEnd);

fin=fin.substring(posEnd, fin.length);

htmlFin += ini+""+sub+"";

}

htmlFin += fin;

return htmlFin;

}

function procesar(elemento) {

elemento.children().each(function() {

var mas=$(this).children().size();

if (mas == 0) {

$(this).html(highlight($(this).text()));

} else {

procesar($(this));

}

});

}

$(document).ready(function(){

$(".filter").keyup(function(){

// Cogemos el texto de búsqueda

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

//Ponemos el contador a 0

var count = 0;

$('span.highlight').each(function() {

$(this).replaceWith($(this).text());

});

//Por cada elemento de la lista...

$(".list tr:not(:first-child)").each(function(){

var html=$(this).html();

var posIni = -1;

var posEnd = -1;

filterNorm=normalizar(filter);

filterSize=filter.length;

regex=new RegExp(filterNorm, 'gi');

var buscar=normalizar($(this).text()).search(regex);

var htmlFin="";

if (buscar > -1) {

if (filter) procesar($(this));

$(this).show();

count++;

} else $(this).fadeOut();

});

// Actualizamos la cuenta

if (filter) {

var numberItems = count;

//Si no hay coincidencias lo mostramos en rojo.

if (count==0) $(".cuenta").html("Coincidencias ="+count+"");

else $(".cuenta").text("Coincidencias:"+count);

//Si no hay filtro, limpiamos el html de cuentas.

} else $(".cuenta").text("");

});

});

使用jquery / javascript制作搜索脚本的目标，该脚本突出显示输入中的匹配项。 它必须忽略大小写和变音符号(重音符号)和html标签

我是如此接近，但是它失败了，因为它不会忽略html标签，我的意思是，脚本突出显示了html标签也是如此...

例如：

更新：您可以在这里尝试脚本jsfiddle.net/josecash/nD6dg/2，只需键入td或即可查看错误。

可以说我有一个这样的表：

Name	Kind	Type
Fedora	Linux	Operative System

如果在输入中键入字母o，则脚本将在Fedora和操作系统中突出显示o，但在标记strong中突出显示o。

我想我可以使用regex var中的正则表达式来做到这一点，但我无法弄清楚...

任何帮助将不胜感激

该脚本如下所示：

$(document).ready(function(){

$(".filter").keyup(function(){

// Input text

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

//Ponemos el contador a 0

var count = 0;

$('span.highlight').each(function() {

$(this).replaceWith($(this).text());

});

//Foreach tr in the table

$(".list tr:not(:first-child)").each(function(){

var html=$(this).html();

var posIni = -1;

var posEnd = -1;

// normalizar just replace accents

filterNorm=normalizar(filter);

var filterSize=filter.length;

var regex=new RegExp(filterNorm, 'gi');

var buscar=normalizar($(this).text()).search(regex);

var htmlFin="";

if (buscar > -1) {

if (filter) {

var end=html;

while ((match = regex.exec(normalizar(end))) != null) {

posIni=match.index;

posEnd = posIni+filterSize;

var ini="";

if (posIni != 0) ini=end.substring(0, posIni);

var sub=end.substring(posIni, posEnd);

end=end.substring(posEnd, end.length);

htmlFin += ini+""+sub+"";

}

htmlFin += end;

}

if (filter) $(this).show().html(htmlFin);

else $(this).show();

count++;

} else $(this).fadeOut();

});

});

});

您正在调用.split()，但是您从不使用结果(变量" sp")。为什么？

抱歉，我已经清除了代码，只是为了尝试

如果您完全控制表的内容，则可以避免在单元格内使用HTML标记，例如。 Fedora，您的样式表在其中使用指令.strong { font-weight:bold; }提供样式。

我没有对该表的完全控制，无论如何，它可以包含所有类型的标签，在您的示例中，如果我输入td，脚本将突出显示

标签...

在那种情况下，代码从根本上是有缺陷的。在每个tr中，您需要遍历每个td并寻址其文本。

@josecash-要将问题标记为已解决，只需在您喜欢的答案下面打勾(或将其保留在您认为没有答案的地方)。勾选答案会奖励曾经帮助过您的人。

另外，最好将自己的解决方案后答案作为答案而不是问题编辑输入到SO中。应该使问题对将来的读者有用，并且将答案作为问题;)中的第一件事会有些混乱。编辑：如果问题已关闭，则不可能，但是-也许添加了Pastie链接作为注释？

是的，问题应还原为原始内容，并添加(并接受)答案以反映最终答案。

@Josecash，

避免处理HTML标记本身的一个好方法是：

使用纯JavaScript而不是jQuery发现子节点

在遇到文本节点时将其视为

在遇到它们时(递归)进一步渗透到元素节点中。

总体代码将如下所示：

$(document).ready(function(){

//Highlighter function

function highlight(text) {

//Your highlight code here

//...

//return text with added HTML markup

}

//Recursive scanner function to penetrate the DOM tree.

function scanNode(index, node) {

//node is a plain javascript reference to a DOM node, not jQuery-wrapped.

if(node.nodeType == 3) {//hurray, it's a TEXT_NODE

$(node).replaceWith(highlight(node.nodeValue));

}

else if(node.nodeType == 1){//it's an ELEMENT_NODE

//Here, for convenience, we use jQuery's utility `.each() method

//but we are still essentially working in plain javascript.

$.each(node.childNodes, scanNode);

}

}

var $list = $(".list");

//master routine

$(".filter").keyup(function() {

$list.find('span.highlight').each(function() {

var $this = $(this);

$this.replaceWith($this.text());

}).find("tr:gt(1)").each(scanNode);

});

});

感谢@Bergi在下面的输入

您将必须编写highlight()函数，这将对您在上面放置的代码进行相当轻松的修改。 确保该函数返回标记的文本字符串。

关键行$(node).replaceWith(highlight(node.nodeValue));已经过测试(在Opera 12.12和IE9中)；的jsfiddle

其他所有内容都未经测试，因此可能需要调试。

+1。您可以使scanNode接受索引参数或对thisArg进行操作，以便可以直接在.each()中使用它。另外，由于您的函数是递归的，所以我没有理由不从元素开始:-)

@Bergi，我很惊讶，您实际上已经检查了我的代码。谢谢。我不能完全理解通过传递索引参数的意思...-我确定只是我很胖。从元素开始(因此是它们的)只是在开始递归之前实现OP jQuery" not(：...)"排除的一种方式，从而允许scanNode()与节点和不需要内部处理jQuery集合。我开玩笑地采用了其他方法，最后得到了一些可行的方法-我确信必须有很多其他方法可以为这只猫做皮。

如果函数签名为function scanNode(index, node)，则可以仅使用$list.find("tr:gt(1)").each(scanNode)和$.each(node.childNodes, scanNode)。

是的，我当然傻了。我将编辑答案。

完成了，谢谢，特别是给我线索甜菜根-甜菜根的那个人，和向我展示jsFiddle的那个人(我不知道我没有它的生活...)Bergi，谢谢你的时间。最后，正如Beetroot-Beetroot所建议的那样，我在节点中使用递归来做到这一点，但是我已经使用jquery而不是普通的jquery了，对不起，这大大简化了我的生活...我用最终代码更新了我的第一篇文章。

我的代码使用纯JavaScript node.childNodes的原因非常充分；因为jQuerys .children()(像其他选择器和选择方法一样)会滤除文本节点。因此，如果节点包含文本节点和元素节点的混合，则通过您的.children()方法，将不会处理文本节点。

您不应使用" html"作为正则表达式测试字符串，而应使用结果文本。

测试以下代码：

if (filter) {

//replace this line:: var end=html;  by

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

....

}

如果我这样做，则while循环内的位置(posIni和posEnd)将不正确。

您能否使用以下jsfiddle解释问题：jsfiddle.net/pyFry？ {已删除normalizar函数}

老实说我不知道??该怎么用...但是我会尝试...

如果您输入例如字母t，那么Ive会将此jsfiddle.net/josecash/nD6dg/2制成，错误就会出现...

Copyright ©  码农家园