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 © 码农家园