Jquery Get Position Of Character In A Div?

Hi Guys [and girls] :) Just wondering whether it's possible to get the absolute positiong of a character within a div ?

bunch of text is in here a

Solution 1:

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 wrappervar offset = $(".get-position-of-it").offset();
$elem.html(text)    ; //Place backvar 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]
];

Solution 2:

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/

Solution 3:

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.

Share