0

可能重复：
使用正则表达式和 javascript 突出显示 html 中的单词 - 几乎就在那里

更新 --> 最终脚本，一旦解决，就是：

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+"<span class='highlight'>"+sub+"</span>";
    }
    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("<span class='error'>Coincidencias = "+count+"</span>");
            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 或 < 或 > 即可查看错误。

假设我有一张这样的桌子：

<table>
<tr><th>Name</th><th>Kind</th><th>Type</th></tr>
<tr>
<td><strong>Fedora</strong></td>
<td>Linux</td>
<td>Operative System</td>
</tr>
</table>

如果我在输入中键入字母 o，我的脚本将突出显示 Fed o ra 和O operating System 中的 o，以及标签 str o ng 中的 o。

我想我可以用正则表达式中的正则表达式来做到这一点，但我想不通......

任何帮助将不胜感激

脚本如下所示：

$(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+"<span class='highlight'>"+sub+"</span>";
                    }
                    htmlFin += end;
                }
                if (filter) $(this).show().html(htmlFin);
                else $(this).show();
                count++;
            } else $(this).fadeOut();
        });
    });
});
4

2 回答 2

2

@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

其他一切都未经测试，因此可能需要调试。

于 2013-01-13T20:48:14.337 回答
0

您不应该使用 'html' 作为您的正则表达式测试字符串，而是使用生成的文本。测试以下代码：

if (filter) {
      //replace this line:: var end=html;  by
      var end= $(this).text();
    ....
}
于 2013-01-13T16:25:17.580 回答