JSFiddle - React, Tailwind, and code Playground

by vol7ron

HTML

<div id="wrapper">
   The rain in <b class="spain">this Spain country</b> stays spain mainly in the <i data-test="Spain">plain</i>.
</div>

CSS

span {color:red;}

JavaScript

var wrapText = function ( elems,regex ) {
            var re = new RegExp(regex);
            var elem;
            
            for ( var i = 0; elems[i]; i++ ) {
                elem = elems[i];
        
                // Get the text from text nodes and CDATA nodes
                if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
                    parent = elem.parentNode;
                    re.lastIndex = 0;
                    if(re.test(elem.nodeValue)){               
                        var span = document.createElement('span');
                        span.innerHTML = RegExp.$1;
                    
                        if (RegExp.leftContext != ''){
                           parent.insertBefore(document.createTextNode(RegExp.leftContext),elem);
                           i++;
                        }
                        
                        parent.insertBefore(span,elem);   i++;
                            
                        if (RegExp.rightContext != ''){
                           parent.insertBefore(document.createTextNode(RegExp.rightContext),elem);
                           i++;
                        }
                        
                        parent.removeChild(elem);
                    }                   
        
                // Traverse everything else, except comment nodes
                } else if ( elem.nodeType !== 8 ) {
                    wrapText( elem.childNodes, regex );
                }
            }
        
            return;
        };
        
        
        var obj = document.getElementById('wrapper');
        wrapText([obj],/(spain)/gi);

        console.log(obj.innerHTML);