0

I have a lot of text within a DIV. I would like to be able to search it on a string using perhaps a PHP regex then find the y position of that text that is searched on so I can place an image next to it.

I believe this would be the best way of doing it, I am unsure. However, I can't figure out how to determine how many pixels from the top of the screen that line is. Any recommendations?

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
user1524441
  • 25
  • 1
  • 6
  • possible duplicate of [Get cursor or text position in pixels for input element](http://stackoverflow.com/questions/6930578/get-cursor-or-text-position-in-pixels-for-input-element) – Giacomo1968 May 03 '14 at 02:10
  • @user1524441 did none of the answers work for you? – jayaguilar May 03 '14 at 15:14

3 Answers3

1

@user1524441 not sure if this what you mean but from what I understand you want to add an image next to a specific search term, if this is the case you can use the following approach assuming you are using jquery:

var search = "Robin";
var text = $('.content').text();
$('.content').html(text.replace(search,'<span class="search-term" style="font-weight:bold;">' + search + '</span>'));
$('.search-term').before('<img src="url/goes/here" alt="" title=""/>');

here is a jsfiddle displaying how it works http://jsfiddle.net/6YsfB/

jayaguilar
  • 182
  • 6
0

you can use substring and indexOf

var serch = "Robin"
var text = "hi my name is Robin, what you so talk? I'm god";

document.write(text.substring(text.indexOf(serch),text.indexOf(serch)+(serch).length));

http://jsfiddle.net/5bejQ/1/

WearFox
  • 293
  • 2
  • 19
  • 1
    Where's the code that adds the image to highlight the words? I think you have misunderstood the question... – Lee Taylor May 03 '14 at 02:11
0

If you're doing the search on the server, you could output the found text wrapped in <span> tags with a certain CSS class:

Here is some text with the <span class = "highlighted">text of interest</span> highlighted.

Then you could use the CSS "content" property (http://css-tricks.com/css-content/) in conjunction with the :before or :after pseudo-classes to show an image before or after the highlighted text.

adv12
  • 8,443
  • 2
  • 24
  • 48