JSFiddle - React, Tailwind, and code Playground

JavaScript

var smiley_array = [':)',';)',':P',':D',':O',':(',':\'(',':|',':/',':$',':@','(A)','3:)',':cool:',':*',':lol:',':z'];

var smiley_xhtml = ['smile','wink','raspberry','big_smile','surprise','sad','crying','plain','worried','embarrassed','angry','angel','devil','cool','kiss','laugh','tired'];

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

function smilies(text) {
    for (var i = 0; i< smiley_array.length; i++) {
        var word = new RegExp(escapeRegExp(smiley_array[i]), "g");
        
        var smiley_img = '<img style="margin-bottom: -3px;" height="20px" width="20px" src="<?php echo $this->x7->smilie_url; ?>' + smiley_xhtml[i] + '.png" />';    
        text = text.replace(word, smiley_img);
    }
return text;
}

alert(smilies(':) :) :O'));