How to find a substring only in the text portion of an HTML string, with Javascript?

Question

UPDATE: I am no longer specifically in need of the answer to this question - I was able to solve the (larger) problem I had in an entirely different way (see my comment). However, I'll check in occasionally, and if a viable answer arrives, I'll accept it. (It may take a week or three, though, as I'm only here sporadically.)

I have a string. It may or may not have HTML tags in it. So, it could be:

'This is my unspanned string'

or it could be:

'<span class="someclass">This is my spanned string</span>'

or:

'<span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>'

or:

'<span class="no-text"><span class="silly-example"></span></span><span class="some-class">This is my spanned string</span>'

I want to find the index of a substring, but only in the portion of the string that, if the string were turned into a DOM element, would be (a) TEXT node(s). In the example, only in the part of the string that has the plain text This is my string.

However, I need the location of the substring in the whole string, not only in the plain text portion.

So, if I'm searching for "span" in each of the strings above:

• searching the first one will return 13 (0-based),
• searching the second will skip the opening span tag in the string and return 35 for the string span in the word spanned
• searching the third will skip the empty span tag and the openings of the two nested span tags, and return 91
• searching the fourth will skip the nested span tags and the opening of the second span tag, and return 100

I don't want to remove any of the HTML tags, I just don't want them included in the search.

I'm aware that attempting to use regex is almost certainly a bad idea, probably even for simplistic strings as my code will be encountering, so please refrain from suggesting it.

I'm guessing I will need to use an HTML parser (something I've never done before). Is there one with which I can access the original parsed strings (or at least their lengths) for each node?

Might there be a simpler solution than that?

I did search around and wasn't been able to find anyone ask this particular question before, so if someone knows of something I missed, I apologize for faulty search skills.

Answer 1

The search could loop through the string char by char. If inside a tag, skip the tag, search the string only outside tags and remember partial match in case the text is matched partially then interrupted with another tag, continue the search outside the tag.

Answer 2

You could use the browser's own HTML parser and XPath engine to search only inside the text nodes and do whatever processing you need.

Here's a partial solution:

var haystack = '  <span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>';
var needle = 'span';

var elt = document.createElement('elt');
elt.innerHTML = haystack;

var iter = document.evaluate('.//text()[contains(., "' + needle + '")]', elt).iterateNext();

if (iter) {
    var position = iter.textContent.indexOf(needle);
    var range = document.createRange();
    range.setStart(iter, position);
    range.setEnd(iter, position + needle.length);
    // At this point, range points at the first occurence of `needle`
    // in `haystack`. You can now delete it, replace it with something
    // else, and so on, and after that, set your original string to the
    // innerHTML of the document fragment representing the range.
    console.log(range);
}

JSFiddle.

Answer 3

Here is a little function I came up with:

function customSearch(haysack,needle){
    var start = 0;
    var a = haysack.indexOf(needle,start);
    var b = haysack.indexOf('<',start);

    while(b < a && b != -1){
        start = haysack.indexOf('>',b) + 1;
        a = haysack.indexOf(needle,start);
        b = haysack.indexOf('<',start);
    }

    return a;
}

It returns the results you expected based in your examples. Here is a JSFiddle where the results are logged in the console.

Answer 4

Let's start with your third example:

var desiredSubString = 'span';
var entireString = '<span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>';

Remove all HTML elements from entireString, above, to establish textString:

var textString = entireString.replace(/(data-([^"]+"[^"]+")/ig,"");
textString = textString.replace(/(<([^>]+)>)/ig,"");

You can then find the index of the start of the textString within the entireString:

var indexOfTextString = entireString.indexOf(textString);

Then you can find the index of the start of the substring you're looking for within the textString:

var indexOfSubStringWithinTextString = textString.indexOf(desiredSubString);

Finally you can add indexOfTextString and indexOfSubStringWithinTextString together:

var indexOfSubString = indexOfTextString + indexOfSubStringWithinTextString;

Putting it all together:

var entireString = '<span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>';
var desiredSubString = 'span';

var textString = entireString.replace(/(data-([^"]+"[^"]+")/ig,"");
textString = textString.replace(/(<([^>]+)>)/ig,"");

var indexOfTextString = entireString.indexOf(textString);
var indexOfSubStringWithinTextString = textString.indexOf(desiredSubString);
var indexOfSubString = indexOfTextString + indexOfSubStringWithinTextString;