Find the absolute or relative position of text (letters or words) or <br/"> in html?

Question

I was wondering if there is a way to find the position of letters in html using javascript or jQuery? I doubt very much that it is possible, but it would make my life easier.

Alternatively, is there a way to find the position of <br /> tags in html using js?

Thanks in advance.

Answer 1

As tdammers mentions, processing all the details of combining the processing process of what you offer has many nuances that may need to be decided, depending on what you do.

The basics of what you are trying to do are:

• Wrap the element around the text for which you want to find the position, i.e. in case of text, possibly <span> .
• Get the $.offset() or $.position() item or items you added. Whatever you choose, this refers to what you are trying to do; the first refers to document , the second refers to the containing element.

I created a simple script demonstration to “highlight” a term entered in a text box in several paragraphs using div with offsets position: absolute and top / left relative to the terms found in the paragraphs (located next to it <span> ).

Note that this is just a demo (from $.offset() ); this is not production-ready code. There is a link to a demonstration of live scripts below the code snippets.

First, I created a function to search and create a <div> selection for each term I found.

 function highlightWordPositions(word) { var $paras = $('p'), $spans, _top = 0, _left = 0; $paras.each(function(){ var $p = $(this), regex = new RegExp(word, 'g'); $p.html($p.text().replace(regex, '<span>' + word + '</span>')); $spans = $p.find('span'); $spans.each(function(){ var $span = $(this), $offset = $span.offset(), $overlay = $('<div class="overlay"/>'); $overlay .offset($offset) .css({ width: $span.innerWidth(), height: $span.innerHeight() }).show(); $(document.body).append($overlay); }); }); } 

Then I hooked the callback to the $.keyup() event:

 $('#term').keyup(function(event){ var term = this.value; if (term == '') { $('.overlay').remove(); return false; } else if (term.indexOf(' ') != -1) { this.value = term.replace(' ', ''); return false; } $('.overlay').remove(); highlightWordPositions(term); }); 

http://jsfiddle.net/JaN75/

Answer 2

Assuming you mean the position where the character is displayed on the screen, in pixels:

jQuery or DOM do not model individual characters in their object models, so you cannot directly read the character position.

The best way I can think of is to insert a dummy element immediately before (or after) the character, for example. a space of zero width with a special class, and then get its position. In addition, you can wrap the character in such a special element, and then get the wrapper position, width, height, etc.

This is not trivial, because you need to scan the HTML code and you do not want to break the HTML by inserting tags where they do not belong, for example, if you want to match the "d" character, you do not want to turn the <div> into <<span class="magic">d</span>iv> since it will not be properly formed HTML.

In addition, inserting these dummy elements can slightly change the layout, depending on how the browser handles kerning.

Answer 3

in action: http://jsfiddle.net/WKgWM/

HTML:

 <p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>​ 

JS:

 var selection = "dis"; var spn = '<span class="selected">'+selection+'</span>'; $("p").html($("p").html().replace(selection,spn)); 

CSS

 .selected{ background-color:#FF00FF; }​