Javascript / Jquery：获取元素内char的索引

Question

Is there a simple way to get the index of a char within an element? For example, if I'm looking at the first span below, then I want to know that its first char is the seventh char within the li. I will only need to know this for chars within an element (no textnodes), but there may be textnodes, and their chars do "count".

<li id = "li">
    <p>0123</p>
    <div>4
      <span id = "span">5</span>
      <span>67</span>
    </div>
    8
</li>

Edit: Added IDs to the elements above. then something like:

index = getIndexOfFirstChar($("#span"), $("#li"))

Note that the chars are not unique. I used numbers, but it could be any text.

Answer 1

You can do this by using a mix of .text() (to get inner text without HTML), .replace() (to remove whitespace) and .indexOf() to get the index:

var clearTextWithNoWhitespace = $('li').text().replace(/\s+/g, '');
var index = clearTextWithNoWhitespace.indexOf('5');

console.log(clearTextWithNoWhitespace); //012345678
console.log(index); //5

JSFiddle DEMO

If you want to include whitespace:

var index = $('li').text().indexOf('5');
console.log(index); //22

JSFiddle DEMO