项目中遇到的坑以及解决办法（导师辅助工作）

一、 项目介绍

    这是一个学校项目，需要兼容到ie8，所以我们放弃了使用react等框架，使用了原始的jQuery（1.9.1），bootstrap3,

    主要引用的解决兼容性插件有

  1 .jquery.hashchange.min.js，主要解决问题是项目要求是单页面应用，需要改变hash值并监听hash的变化更新页面

  2. jquery.placeholder.min.js、解决ie8不支持placeholder

  3. json2.js、json_parse.js、解决ie8不支持JSON.parse 和 JSON.stringify

  4 .storage.js  解决ie8不支持 localStorage

二、 replace正则使用

之前使用replace方法时都是替换固定的字符

如 

var str = "my name is liulingli";var reStr = str.replace(/my/g,"his");console.log(reStr); // his name is liulingli

这次在项目中遇到一个需求，发送聊天信息时需要支持表情，本来一开始我是直接用contenteditable="true",直接添加图片标签，这样导致了一个问题，项目中可以导出聊天记录，这样导出的聊天记录就是一个图片标签，不便于理解，所以我必须得给表情图片对应文字，比如我发送笑脸表情，存储的是[笑脸]，这样我在前端生成记录的时候就需要将[笑脸]替换成图片标签。我的实现方式如下，将表情图片与含义分别对应，这样我在保存和生成时可以互相替换

//表情图片对于含义var emojJsonTo = {};var emojJson = {    "[微笑]" : '<img src="../images/emoj/e100.gif">',    "[撇嘴]" : '<img src="../images/emoj/e101.gif">',    "[色]" :   '<img src="../images/emoj/e102.gif">',    "[发呆]" : '<img src="../images/emoj/e103.gif">',    "[得意]" : '<img src="../images/emoj/e104.gif">',    "[流泪]" : '<img src="../images/emoj/e105.gif">',    "[害羞]" : '<img src="../images/emoj/e106.gif">',    "[闭嘴]" : '<img src="../images/emoj/e107.gif">',    "[睡]" :   '<img src="../images/emoj/e108.gif">',    "[大哭]" : '<img src="../images/emoj/e109.gif">',    "[尴尬]" : '<img src="../images/emoj/e110.gif">',    "[发怒]" : '<img src="../images/emoj/e111.gif">',    "[调皮]" : '<img src="../images/emoj/e112.gif">',    "[龇牙]" : '<img src="../images/emoj/e113.gif">',    "[惊讶]" : '<img src="../images/emoj/e114.gif">',    "[难过]" : '<img src="../images/emoj/e115.gif">',    "[酷]" :   '<img src="../images/emoj/e116.gif">',    "[冷汗]" : '<img src="../images/emoj/e117.gif">',    "[抓狂]" : '<img src="../images/emoj/e118.gif">',    "[吐]" :   '<img src="../images/emoj/e119.gif">',    "[偷笑]" : '<img src="../images/emoj/e120.gif">',    "[可爱]" : '<img src="../images/emoj/e121.gif">',    "[白眼]" : '<img src="../images/emoj/e122.gif">',    "[傲慢]" : '<img src="../images/emoj/e123.gif">',    "[饥饿]" : '<img src="../images/emoj/e124.gif">',    "[困]" :   '<img src="../images/emoj/e125.gif">',    "[惊恐]" : '<img src="../images/emoj/e126.gif">',    "[流汗]" : '<img src="../images/emoj/e127.gif">',    "[憨笑]" : '<img src="../images/emoj/e128.gif">',    "[大兵]" : '<img src="../images/emoj/e129.gif">',    "[奋斗]" : '<img src="../images/emoj/e130.gif">',    "[咒骂]" : '<img src="../images/emoj/e131.gif">',    "[疑问]" : '<img src="../images/emoj/e132.gif">',    "[嘘]" :   '<img src="../images/emoj/e133.gif">',    "[晕]" :   '<img src="../images/emoj/e134.gif">',    "[折磨]" : '<img src="../images/emoj/e135.gif">',    "[衰]" :   '<img src="../images/emoj/e136.gif">',    "[骷髅]" : '<img src="../images/emoj/e137.gif">',    "[敲打]" : '<img src="../images/emoj/e138.gif">',    "[再见]" : '<img src="../images/emoj/e139.gif">',    "[擦汗]" : '<img src="../images/emoj/e140.gif">',    "[抠鼻]" : '<img src="../images/emoj/e141.gif">',    "[鼓掌]" : '<img src="../images/emoj/e142.gif">',    "[糗大了]" :'<img src="../images/emoj/e143.gif">',    "[坏笑]" :  '<img src="../images/emoj/e144.gif">',    "[左哼哼]" :'<img src="../images/emoj/e145.gif">',    "[右哼哼]" :'<img src="../images/emoj/e146.gif">',    "[哈欠]" :  '<img src="../images/emoj/e147.gif">',    "[鄙视]" : '<img src="../images/emoj/e148.gif">',    "[委屈]" : '<img src="../images/emoj/e149.gif">',    "[快哭了]" :'<img src="../images/emoj/e150.gif">',    "[阴险]" : '<img src="../images/emoj/e151.gif">',    "[亲亲]" : '<img src="../images/emoj/e152.gif">',    "[吓]" :   '<img src="../images/emoj/e153.gif">',    "[可怜]" : '<img src="../images/emoj/e154.gif">',    "[菜刀]" : '<img src="../images/emoj/e155.gif">',    "[西瓜]" : '<img src="../images/emoj/e156.gif">',    "[啤酒]" : '<img src="../images/emoj/e157.gif">',    "[篮球]" : '<img src="../images/emoj/e158.gif">',    "[乒乓]" : '<img src="../images/emoj/e159.gif">',    "[咖啡]" : '<img src="../images/emoj/e160.gif">',    "[饭]" :   '<img src="../images/emoj/e161.gif">',    "[猪头]" : '<img src="../images/emoj/e162.gif">',    "[玫瑰]" : '<img src="../images/emoj/e163.gif">',    "[凋谢]" : '<img src="../images/emoj/e164.gif">',    "[示爱]" : '<img src="../images/emoj/e165.gif">',    "[爱心]" : '<img src="../images/emoj/e166.gif">',    "[心碎]" : '<img src="../images/emoj/e167.gif">',    "[蛋糕]" : '<img src="../images/emoj/e168.gif">',    "[闪电]" : '<img src="../images/emoj/e169.gif">',    "[炸弹]" : '<img src="../images/emoj/e170.gif">',    "[刀]" :   '<img src="../images/emoj/e171.gif">',    "[足球]" : '<img src="../images/emoj/e172.gif">',    "[瓢虫]" : '<img src="../images/emoj/e173.gif">',    "[便便]" : '<img src="../images/emoj/e174.gif">',    "[月亮]" : '<img src="../images/emoj/e175.gif">',    "[太阳]" : '<img src="../images/emoj/e176.gif">',    "[礼物]" : '<img src="../images/emoj/e177.gif">',    "[拥抱]" : '<img src="../images/emoj/e178.gif">',    "[强]" :   '<img src="../images/emoj/e179.gif">',    "[弱]" :   '<img src="../images/emoj/e180.gif">',    "[握手]" : '<img src="../images/emoj/e181.gif">',    "[胜利]" : '<img src="../images/emoj/e182.gif">',    "[抱拳]" : '<img src="../images/emoj/e183.gif">',    "[勾引]" : '<img src="../images/emoj/e184.gif">',    "[拳头]" : '<img src="../images/emoj/e185.gif">',    "[差劲]" : '<img src="../images/emoj/e186.gif">',    "[爱你]" : '<img src="../images/emoj/e187.gif">',    "[NO]" : '<img src="../images/emoj/e188.gif">',    "[OK]" : '<img src="../images/emoj/e189.gif">',};for(var i in emojJson){    emojJsonTo[emojJson[i]] = i;}

这里替换我用到了之前没有用到的replace的另一种替换方式

生成保存的时候

 var content = '表情<img src="../images/emoj/e100.gif">'; var reContent = content.replace(/<img src="\.\.\/images\/emoj\/[a-zA-Z0-9]+.gif">/g,function(str){        return emojJsonTo[str]||str;    });console.log(reContent); //表情[微笑]

前端显示

var content = "表情[微笑]"；var reContent = content.replace(/\[[\u4e00-\u9fa5a-zA-Z0-9]+\]/g,function(str){       return emojJson[str]||str; });console.log(reContent); //'微笑<img src="../images/emoj/100.gif">'

前面return 的时候用了||，是为了避免没有对应值时是undefined