0

Imagine that we have next element:

<input type="text" data-search />
<div data-container>
  <div>text 1</div>
  <div>text 2 <span>some other</span> <strong>text</strong></div>
</div>

After typing on [data-search] input, typed phrase should be highlighted in container [data-container] (if phrase has been found).

This search should be "live". Search through elements can be skipped (some other text doesn't give any results), but if you know how to implement this functionality - it would be great.

So the simple RegExp and replacing all content is quite heavy operation because [data-container] content can be large.

Other way is drawing rects under the found text. But again, how to detect text position without updating container (we can add some wrapper to the text and calculate its coords and then remove it)?

Probably you can give me a peace of advice in what direction should I move.

Thanks.

Vitalii Petrychuk
  • 14,035
  • 8
  • 51
  • 55
  • So you expect to find the exact phrase `"other text"` in that markup and highlight it dynamically? – Bergi Apr 24 '13 at 18:27
  • @Bergi yes, but not only full phrase. Result also can be `o|ot|oth|othe|other|other |other t|...` – Vitalii Petrychuk Apr 24 '13 at 18:32
  • 1
    Check out [highlight words in html using regex & javascript](http://stackoverflow.com/q/10416643/1048572) - you "only" need to add a method for removing the highlight-spans and something to search across element boundaries – Bergi Apr 24 '13 at 18:36

0 Answers0