Question

我想构建一个包含HTML Web控件的应用程序，并且可以在html区域中搜索和突出显示多个短语，就像今天在Web浏览器中实现的一样。主要思想是使搜索忽略html特殊标记，并仅引用真实文本（内部html）。我知道解决方案将包括编辑DOM，但我不确定如何实现它。我在网上搜索了很多，我也阅读了Zavael的帖子，但不幸的是我找不到合适的答案。任何答案，示例或方向将不胜感激。

Answer 1

如果您指的是在页面内对HTML内容进行内联搜索：首先我会说这可能不是一个好主意。您不应该取代浏览器的本机功能。让用户按照他们习惯的方式做事。保持不同网站的体验一致。

然而，如果你需要这个用于一些利基目的，我认为这不会那么难。

jQuery可以实现它。只是一个非常粗略的开始：

//As you type in the search box...
$("#search_box").change(function() {
    //...you search the searchable area (maybe use some regex here)
    $("#search_area").html();
});

编辑：提问者问我是否可以详细说明代码。

//As you type in the search box...
$("#search_box").change(function() {
    //This part of the code is called when the contents of the search box changes

    //This is the contents of the searchable area:
    $("#search_area").html();

    //This is the contents of the search box:
    $(this).val();

    //So you could perform a function here, like replacing the occurences of the
    //search text with a span (you could use CSS to highlight the span with a
    //background colour:

    var html_contents = $("#search_area").html();
    var search_tem = $(this).val();

    $("#search_area").html(html_contents.replace(search_term, '<span class="highlight">'+search_term+'</span>'));
});

请注意，在上面的示例中，Javascript'replace'函数只会替换第一次出现。您需要在第一个参数中使用正则表达式来替换所有。但我不想为你写所有的代码;）

Web浏览器如何实现文本搜索？

1 个答案: