JSFiddle - React, Tailwind, and code Playground

by George Y

JavaScript

var str = '<div style="text-align: center;"><span style="font-size: 36px;">Hel<span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;">​</span>lo<span style="letter-spacing: 0px;">Wo<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;">​</span>rld</span></span><span style="letter-spacing: 0px;">!</span></div><br>';



    var re = /(<span\s+[^>]*?\s*class\s*=\s*(?:\'|")(?:\S+\s+)?fr-marker(?:\s+\S+)?\1[^>]*>[\s\S]*?<\/span>)/gi;

    var matches;
    var counter = 0;
    var str2= str;

    while ((m = re.exec(str)) !== null) {
        if (m.index === re.lastIndex) {
            re.lastIndex++;
        }
        counter++;
        // View your result using the m-variable.
        // eg m[0] etc.
        console.log(m)
       // str2 = str2.replace(m[0],'').replace(m[1],'')
        
        if(counter==1) {
            str2 = str2.replace(m[0], '<span class="custom-selection" style="background:red">');
        }else{
            str2 = str2.replace(m[0], '</span>')
        }
    }


    console.log(str);