In my project, I need to develop a custom emoticons module as follows:
Its javascript implementation is as follows:
/*** Emoji module * @ fileoverview emoji * @ author Collin * // <Reference Path = ".. /jquery-1.7.2-vsdoc.js "/> var emoji = {URL: 'xxx', icons: ["/surprised/","/grin/","/color /", "/daze/", "/satisfied/", "/weeping/", "/shy/", "/Shut up/", "/sleep /", "/cry/", "/embarrassed/", "/angry/", "/naughty/", "/fangya/", "/smile /", "/SAD/", "/cool/", "/Ill/", "/crazy/", "/vomit/", "/sneer /", "/cute/", "/white eyes/", "/arrogant/", "/hunger/", "/sleepy/", "/Frightened /", "/sweat/", "/smile/", "/soldier/", "/struggle/", "/curse/", "/doubt/", "/hush /","/Dizzy/","/torture/","/decay/","/skeleton/","/knock/","/Goodbye /", "/pig/", "/CAT/", "/dog/", "/hug/", "/money/", "/Bulb /", "/ice cream/", "/cake/", "/lightning/", "/bomb/", "/knife/", "/football /", "/NOTE/", "/stool/", "/coffee/", "/rice/", "/medicine/", "/rose /", "/withered/", "/show love/", "/heartbeat/", "/table/", "/handshake/", "/gift /", "/phone/", "/clock/", "/email/", "/TV/", "/Sun/", "/moon /", "/strong/", "/weak/", "/handshake/", "/ye/", "/Rabbit/", "/beauty /", "/kids/", "/handsome guy/", "/wine/", "/Cola/"], parse: function (content) {If (conten T = NULL | content = '') return; For (VAR I = 0; I <80; I ++) {var RegEx = new Regexp (this. icons [I], "G"); var IMG = " 69) borderclass = "emoji-bottom"; if (I = 79) borderclass = "emoji-bottom emoji-Right"; allemojis + = "<Div data-exta = \" "+ this. icons [I] + "\" class = \ "emoji" + borderclass + "\" style = \ "background-image: URL (" + this. URL + I + ". GIF); \ "> </div>";} ((ctlcontainer).html (allemojis); $ (ctlcontainer ). on ("click", "Div", null, function () {$ (ctloutput ). val ($ (ctloutput ). val () + $ (this ). ATTR ("data-exta"); // $ (ctloutput ). focus (); $ (ctlcontainer ). hide () ;}); $ (ctlbind ). click (function () {Switch (Direction) {Case "bottom": {condition (ctlcontainer).css ({position: 'absolute ', bottom: (0-$ (ctlcontainer ). height () + 'px ', left: 0 }). show (); break;} case "TOP": {condition (ctlcontainer).css ({position: 'absolute ', bottom: $ (this ). height () + "PX", left: 0 }). show (); break ;}}}). mouseleave (function () {timeouthandler = Window. setTimeout (function () {$ (ctlcontainer ). hide () ;}, 600) ;}; $ (ctlcontainer ). mouseleave (function () {$ (this ). hide ();}). mouseover (function () {window. cleartimeout (timeouthandler );});}};
The above implementation of the parse method is too time-complex, and will execute an invalid loop when converting large text. I am looking at javascript Regex and string. replace. Regular Expression replacement supports callback to process matching results.
Reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace
The improved parse is as follows:
parse: function (content) { if (content == null || content == '') return; var regex = new RegExp(this.icons.join('|'), 'g'); var that = this; return content.replace(regex, function (match) { var index = that.icons.indexOf(match); if (index < 0) return match; return '' }); }