range.setStart using only character offset?

html, ios, javascript

Solution

I hope this is what you're looking for. This function basically takes the content of the element you want to find nth in, splits it into characters, finds `nth` without counting the HTML tags, wraps `nth` in a temporary span and reads the `offsetTop` and `offsetLeft` before replacing it with the original content. The offset x and y is then returned as an object.

function nthCharOffset(nth, element){
    var orgContent = element.innerHTML;   // Save the original content.
    var arr = orgContent.split('');         // Split every character.

    // Few vars to control the upcoming loop
    var content = '';
    var tag = false;
    var count = 0;

    // Loop through every character creating a new string and wrapping the nth in a temporary span
    for (var i = 0; i < arr.length; i++) {

        // if inside tag, don't count this in the nth count
        if (arr[i] == '<') tag = true
        if (!tag) count++;
        if (arr[i] == '>') tag = false;

        // If this charactar is nth, wrap it in a temporary span
        if (nth == count) content += '<span id="offset-check">' + arr[i] + '</span>';
        else content += arr[i];
    }

    // Set the content with the temporary span.
    element.innerHTML = content;

    // Get the offset of the temporary span.
    var offsetCheck = document.getElementById('offset-check');
    var offset = {x: offsetCheck.offsetLeft , y: offsetCheck.offsetTop }

    // Remove the span.
    element.innerHTML = orgContent;

    // Return the result.
    return offset;
}

Use it like this:

nthCharOffset(10, document.getElementById('element'));

I've made a fiddle so you can test it here.

This fiddle uses the function to position and scale a red rectangle to `nth` character.

Problem

I'm quite new to Javascript, and I've been reading the documentation for the last couple of days trying to figure this out. I've finally had to resort to parading my ignorance here. I have an integer, which is the index of a character within a paragraph. I want to find the bounding rect of this character. I have been trying to do this by making a range that contains the character. So I have tried: ``` var range = document.createRange(); range.setStart (node, offsetInsideNode); ``` and for node I tried passing in the paragraph element, and for the offsetInsideNode I passed in the characterOffset integer. But then I found: "If the node element can have child nodes, then the offsetInsideNode parameter specifies the position of a child node in the childNodes collection of the node element, else it specifies a character position in the text content of the node element." But I want to ONLY use the character position. And I can't figure out how to do this, as it only seems to want to use child node position. I'm guessing I'm missing something. Say I have a paragraph: ``` <p xmlns="http://www.w3.org/1999/xhtml" class="s12" style="color: rgb(0, 0, 0);"><span class="mySpanClass">The</span> quick brown <b>fox</b> jumps over the lazy dog</p> ``` And I want to find the bounding rect of the nth character, how would I go about this? Am I barking up the wrong tree and there is a much simpler way that I have overlooked? Thanks. notes: - javascript only - no libraries - no jquery - for UIWebview on an iOS device

Original source