我如何获取“ indexOf”元素 <p> ？ （jquery）

Question

I just want to get the index position of tagged elements(marks) inside a paragraph. ex:

<p>
   Lorem ipsum dolor ipsum sit <mark>amet</mark>
   consectetur adipisicing elit, sed <mark>amet</mark> 
</p>

I'm trying to emulate the " ctrl+f " function in a div. So im using a plugin called textselect to select/highlight my search result with this:

var startPosition = textHolder.indexOf(textToSelect);
var endPosition = startPosition + textToSelect.length;

$.textSelect('setRange', {
                        start: startPosition,
                        startElement: $("p"),
                        end : endPosition,
                        endElement : $("p")
                    });

but i don't know how can i get the startposition ...

I tried this:

var textHolder = $('div').find('p').contents("mark").eq(0);

$('div').find('p').html().indexOf(textHolder.html())

and returns 34 this would be the startposition of the first mark but if change the textholder to .eq(1) returns 34 again. How can I get the indexOf of each mark substring?

Answer 1

I believe this is basically what you are looking for:

var paragraph = $("#paragraph").html();
var startIndex = paragraph.indexOf("<mark>");
var endIndex = paragraph.indexOf("</mark>");

If you want to do this dynamically just put it within a loop a substring from the endIndex each time. Something like this:

var paragraph = $("#paragraph").html();
var lastIndexFound = false;
while(!lastIndexFound)
{
    var startPostition = paragraph.indexOf("<mark>");
    var endPosition = paragraph.indexOf("</mark>");
    if (endPosition == -1)
    {
        lastIndexFound = true;
        break;
    }
    $.textSelect('setRange', {
                    start: startPosition,
                    startElement: $("p"),
                    end : endPosition,
                    endElement : $("p")
                });
    paragraph = paragraph.substring(endPosition, paragraph.length);

}

Answer 2

I would suggest adding an id to your paragraph as well as to your 'marked' tags and then obtaining your text as a variable like so:

var paragraph = document.getElementById("paragraph_id").innerHTML;

You can then get the starting positions of your substrings using this:

var n1 = paragraph.indexOf('<marked id="m1">');
var n2 = paragraph.indexOf('<marked id="m2">');

If you need to get your ending indexes, you can save other strings from your 'marked' tags similar as described before and add the m1_string_name.length property to your n1 value and m2_string_name.length property to your n2 value.

Cheers!