JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
        mixed ffi content 
        <span>this is another tag ffi <span>(and this is nested ffi</span></span>
        <a href="/news/here-is-a-url-with-ffi-ligature">Here is a ffi ligature</a>
    </h3>

JavaScript

$.fn.ligature = function(str, lig) {
        return this.each(function() {
            recursiveLigatures(this, lig);
        });
    
        function recursiveLigatures(el, lig) {
            if(el.childNodes.length) {
                for(var i=0, len=el.childNodes.length; i<len; i++) {
                    if(el.childNodes[i].childNodes.length > 0) {
                        recursiveLigatures(el.childNodes[i], lig);
                    } else {
                        el.childNodes[i].nodeValue = htmlDecode(el.childNodes[i].nodeValue.replace(new RegExp(str, 'g'), lig));
                    }
                }
            } else {
                el.nodeValue = htmlDecode(el.nodeValue.replace(new RegExp(str, 'g'), lig));
            }
        }
        
        // http://stackoverflow.com/a/1912522/825789
        function htmlDecode(input){
          var e = document.createElement('div');
          e.innerHTML = input;
          return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
        }
    };
    
    $(function(){
        $('h3').ligature('ffi', '&#xfb03;')
               .ligature('ffl', '&#xfb04;')
                 .ligature('ff', '&#xfb00;')
                 .ligature('fi', '&#xfb01;')
                 .ligature('fl', '&#xfb02;');
    });