3

I would like to build an application that contains HTML web control, and enables searching and highlighting multiple phrases in the html area, like it's implemented in web browsers today. The main idea is to make the search ignore the html special tags, and refer only to the real text (the inner html). I know that the solution will include editing the DOM, but I'm not sure how this could be implemented. I searched a lot over the net, and I read also the post of Zavael, but unfortunately I couldn't find any suitable answer. Any answer, example or direction will be appreciated.

Community
  • 1
  • 1
Dana A
  • 31
  • 2
  • Perhaps Lucene has these capabilities. – Robert Harvey Mar 25 '11 at 19:34
  • @robert I think the OP is referring to duplicating the CTRL+F functionality in, say, Google Chrome. It's an unclear question. – Jeff Atwood Mar 26 '11 at 10:00
  • Rodrigo, It will be WPF application, and internally I'll be using the "real WPF" web browser - which is Chromium based. – Dana A Apr 02 '11 at 10:09
  • Jeff, You are correct. Thanks for your clarification. I would like to implement by myself the "Ctrl+F" functionality, in a similar way it's implemented in Chrome. – Dana A Apr 02 '11 at 10:09
  • a lot have change in past years. If somebody will get here looking for updated answer here is described new way of searching text fragments via url: https://web.dev/text-fragments/ and related question on stackoverflow: https://stackoverflow.com/questions/62989058/how-does-text-in-url-works-to-highlight-text basically you pass fragment of text after **#:~:text=** https://web.dev/text-fragments/#:~:text=its%20simplest%20form,%20the%20syntax%20of%20Text%20Fragments%20is%20as%20follows – mmway Feb 12 '21 at 22:02

1 Answers1

1

If you are referring to an inline search of HTML content within the page: firstly I would say that it probably isn't a good idea. You shouldn't supplant the browser's native functionality. Let users do things the way they are used to. Keep the experience consistent across different websites.

However, if you need this for some niche purpose I don't think it would be that hard.

jQuery could achieve it. Just a very rough start:

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

EDIT: Questioner asked if I can elaborate on the code.

//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>'));
});

Please note that in the above example, the Javascript 'replace' function will only replace the first occurence. You need to use a regular expression in the first paramater to replace all. But I don't want to write all the code for you ;)

Chris Harrison
  • 5,512
  • 3
  • 28
  • 36
  • Thanks Chris. As I'm not familiar yet with jQuery, can you please elaborate a bit more? I'll clarify my question- I'm trying to build a mechanism that will act like the search control in the browser, but will implement it in its own way, or will use an existing API on the backwards. So when the user will perform a search in my application, I'll be able to re-render the DOM and highlight SOME of the applicable results that fit his search criteria. Can jQuery handle it? – Dana A Apr 02 '11 at 10:32
  • Yes jQuery can handle it. As I showed in my answer: as the search box changes (ie somebody types) you can execute code (your search mechanism). I will elaborate by editing my answer above. – Chris Harrison May 23 '11 at 04:37