JSFiddle - React, Tailwind, and code Playground

JavaScript

var target1 = 'This is my unspanned string';
var target2 = '<span class="someclass">This is my spanned string</span>'
var target3 = '<span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>';
var target4 = '<span class="no-text"><span class="silly-example"></span></span><span class="some-class">This is my spanned string</span>';

var search = 'span';

var s1 = customSearch(target1,search);
var s2 = customSearch(target2,search);
var s3 = customSearch(target3,search);
var s4 = customSearch(target4,search);

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;
}

console.log(s1,s2,s3,s4);