jQuery Get Position of Character in a Div?

Question

Hi Guys [and girls] :)

Just wondering whether it's possible to get the absolute positiong of a character within a div ?

<div class="mycooldiv">
    bunch of text is in here and for example some # and some other cool #
</div>

i.e. using jQuery UI Position perhaps or otherwise - how would I get for example the position of # ?

score 6 · Accepted Answer · edited Oct 27 '11 at 09:20

If your element only contains text, you can wrap the character in an inline element, and get the position of the element using .offset(). Then, place the original text back. Fiddle: http://jsfiddle.net/Dp6JR/

var $elem = $('.mycooldiv');
var text = $elem.html();
var newText = text.replace(/#/, '<span class="get-position-of-it"></span>');
$elem.html(newText); //Set wrapper
var offset = $(".get-position-of-it").offset();
$elem.html(text)    ; //Place back
var topPos = offset.top;
var left = offset.left;

Note: This function gets the position of the first found # character. If you want to get the position of all characters, add g to the Regular expression (/#/g).

Getting all positions - Fiddle: http://jsfiddle.net/Dp6JR/1/

The offsets of all characters will be stored in a 2-dimensional array (matrix).

var positions = [];
var $elem = $('.mycooldiv');
var text = $elem.html();
var newText = text.replace(/#/g, '<span class="get-position-of-it"></span>');
$elem.html(newText); //Set wrapper
$(".get-position-of-it").each(function(){
    var offset = $(this).offset();
    positions.push([offset.left, offset.top]);
});
$elem.html(text)    ; //Place back
//`positions` is an array of all offset information

The output can be equivalent to:

var positions = [
    [0, 0],
    [100, 0]
];

to fix use `.position()` instead.. and set container to be `position:relative` — Gabriele Petrioli, Oct 27 '11 at 09:26
thanks :) what about a
? how would I go about targeting it in that ? — Andy, Oct 27 '11 at 13:45
This ruins kerning and will return approximate position but not exact one. — daliusd, Dec 05 '18 at 07:24

score 3 · Answer 2 · answered Oct 27 '11 at 09:29

3

You can use the lettering.js plugin, which wraps letters (or words or lines) in span elements.

This way you can easily target them and use .position() on those elements to get their actual location in their container (which should have position:relative)..

Demo at http://jsfiddle.net/gaby/G7hFB/

answered Oct 27 '11 at 09:29

Gabriele Petrioli

191,379
34
261
317

any ideas how I do this for a symbol in a textarea ? i.e. what if like I'm wanting to find a symbol like `#` as a user is entering text into a `textarea` ? – Andy Oct 27 '11 at 13:14
find the location inside a `textarea` ? (*i would think it is nearly impossible to do directly, as the contents are just the `value` of the element and **not** actual content of the DOM*) You might get close if you have an invisible `div` with the same dimensions/padding/line-height/font-size etc (*whatever properties affect the size and positioning of the text inside it*).. as the `textarea` and fill it in with the contents of the `textarea`, and do the tracking inside it instead... – Gabriele Petrioli Oct 27 '11 at 13:21
thanks :) what about a `
` ? how would I go about targeting it in that ?
– Andy Oct 27 '11 at 13:23

score 0 · Answer 3 · answered Oct 27 '11 at 08:59

0

What do you mean by position? The position within the text string or the coordinates (x, y) within the bounds of its container?

If the first case you can use the .idexOf() method, in the second case I'd wrap that element in a span tag and then get its position.

answered Oct 27 '11 at 08:59

Alessandro Vendruscolo

14,493
4
32
41

yeah the second is what i'm after. i.e. the x,y position of it within the container ? – Andy Oct 27 '11 at 09:01

jQuery Get Position of Character in a Div?

3 Answers3

Linked