把一个字符串里符合表情文字标签的地方全部替换为相应的图片的方法

1、表情数据:

var emotion =[{"name": "Expression_1","text": "[微笑]"},{"name": "Expression_2","text": "[撇嘴]"},{"name": "Expression_3","text": "[色]"},{"name": "Expression_4","text": "[发呆]"},{"name": "Expression_5","text": "[得意]"},{"name": "Expression_6","text": "[流泪]"},{"name": "Expression_7","text": "[害羞]"},{"name": "Expression_8","text": "[闭嘴]"},{"name": "Expression_9","text": "[睡]"},{"name": "Expression_10","text": "[大哭]"},{"name": "Expression_11","text": "[尴尬]"},{"name": "Expression_12","text": "[发怒]"},{"name": "Expression_13","text": "[调皮]"},{"name": "Expression_14","text": "[呲牙]"},{"name": "Expression_15","text": "[惊讶]"},{"name": "Expression_16","text": "[难过]"},{"name": "Expression_17","text": "[酷]"},{"name": "Expression_18","text": "[冷汗]"},{"name": "Expression_19","text": "[抓狂]"},{"name": "Expression_20","text": "[吐]"},{"name": "Expression_21","text": "[偷笑]"},{"name": "Expression_22","text": "[愉快]"},{"name": "Expression_23","text": "[白眼]"},{"name": "Expression_24","text": "[傲慢]"},{"name": "Expression_25","text": "[饥饿]"},{"name": "Expression_26","text": "[困]"},{"name": "Expression_27","text": "[恐惧]"},{"name": "Expression_28","text": "[流汗]"},{"name": "Expression_29","text": "[憨笑]"},{"name": "Expression_30","text": "[悠闲]"},{"name": "Expression_31","text": "[奋斗]"},{"name": "Expression_32","text": "[咒骂]"},{"name": "Expression_33","text": "[疑问]"},{"name": "Expression_34","text": "[嘘]"},{"name": "Expression_35","text": "[晕]"},{"name": "Expression_36","text": "[疯了]"},{"name": "Expression_37","text": "[衰]"},{"name": "Expression_38","text": "[骷髅]"},{"name": "Expression_39","text": "[敲打]"},{"name": "Expression_40","text": "[再见]"},{"name": "Expression_41","text": "[擦汗]"},{"name": "Expression_42","text": "[抠鼻]"},{"name": "Expression_43","text": "[鼓掌]"},{"name": "Expression_44","text": "[糗大了]"},{"name": "Expression_45","text": "[坏笑]"},{"name": "Expression_46","text": "[左哼哼]"},{"name": "Expression_47","text": "[右哼哼]"},{"name": "Expression_48","text": "[哈欠]"},{"name": "Expression_49","text": "[鄙视]"},{"name": "Expression_50","text": "[委屈]"},{"name": "Expression_51","text": "[快哭了]"},{"name": "Expression_52","text": "[阴险]"},{"name": "Expression_53","text": "[亲亲]"},{"name": "Expression_54","text": "[吓]"},{"name": "Expression_55","text": "[可怜]"},{"name": "Expression_56","text": "[菜刀]"},{"name": "Expression_57","text": "[西瓜]"},{"name": "Expression_58","text": "[啤酒]"},{"name": "Expression_59","text": "[篮球]"},{"name": "Expression_60","text": "[乒乓]"},{"name": "Expression_61","text": "[咖啡]"},{"name": "Expression_62","text": "[饭]"},{"name": "Expression_63","text": "[猪头]"},{"name": "Expression_64","text": "[玫瑰]"},{"name": "Expression_65","text": "[凋谢]"},{"name": "Expression_66","text": "[嘴唇]"},{"name": "Expression_67","text": "[爱心]"},{"name": "Expression_68","text": "[心碎]"},{"name": "Expression_69","text": "[蛋糕]"},{"name": "Expression_70","text": "[闪电]"},{"name": "Expression_71","text": "[炸弹]"},{"name": "Expression_72","text": "[刀]"},{"name": "Expression_73","text": "[足球]"},{"name": "Expression_74","text": "[瓢虫]"},{"name": "Expression_75","text": "[便便]"},{"name": "Expression_76","text": "[月亮]"},{"name": "Expression_77","text": "[太阳]"},{"name": "Expression_78","text": "[礼物]"},{"name": "Expression_79","text": "[拥抱]"},{"name": "Expression_80","text": "[强]"},{"name": "Expression_81","text": "[弱]"},{"name": "Expression_82","text": "[握手]"},{"name": "Expression_83","text": "[胜利]"},{"name": "Expression_84","text": "[抱拳]"},{"name": "Expression_85","text": "[勾引]"},{"name": "Expression_86","text": "[拳头]"},{"name": "Expression_87","text": "[差劲]"},{"name": "Expression_88","text": "[爱你]"},{"name": "Expression_89","text": "[NO]"},{"name": "Expression_90","text": "[OK]"},{"name": "Expression_91","text": "[爱情]"},{"name": "Expression_92","text": "[飞吻]"},{"name": "Expression_93","text": "[跳跳]"},{"name": "Expression_94","text": "[发抖]"},{"name": "Expression_95","text": "[怄火]"},{"name": "Expression_96","text": "[转圈]"},{"name": "Expression_97","text": "[磕头]"},{"name": "Expression_98","text": "[回头]"},{"name": "Expression_99","text": "[跳绳]"},{"name": "Expression_100","text": "[投降]"},{"name": "Expression_101","text": "[激动]"},{"name": "Expression_102","text": "[街舞]"},{"name": "Expression_103","text": "[献吻]"},{"name": "Expression_104","text": "[左太极]"},{"name": "Expression_105","text": "[右太极]"}]

2、有一个字符串strCont="[微笑]不要说人家啦![撇嘴]人家好[害羞]啊"

3、批量替换方法:

/批量替换方法
function ReCont(strCont) {for (var i in emotion) {        var item = emotion[i];var strimg='<img src="../image/emotion/'+item.name+'.png" width="24" height="24" align="absmiddle">';var reg=new RegExp("\\"+item.text,"g");//alert(reg);strCont=strCont.replace(reg, strimg);//alert(strCont);
    }    return strCont;
}

然后使用:newContent=ReCont(strCont)就可以把表情标签更换为图片了。

另插入小说明:在js里插入特殊字符:

下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:代码 输出\’ 单引号\" 双引号

\& 和号\\ 反斜杠\n 换行符\r 回车符\t 制表符\b 退格符

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ArcGIS微课1000例】0029:ArcGIS绘制平行线(构造平行公路)

在实际工作中,有时需要绘制平行线,比如道路两边的边界线,可以使用“平行复制”功能快速绘制平行线,本文介绍如何使用“平行复制”功能快速绘制平行线。 1. 加载公路矢量 加载配套实验数据包中的数据0029.rar中的矢量数据:公路。 2. 生成平行公路 点击“编辑器”→“开始…

2017年初随想——几个小目标

回顾往事很惨&#xff0c;展望未来渺茫 2016年不顺的事情一箩筐&#xff0c;母亲追求信仰&#xff08;误入歧途&#xff09;导致父母离婚&#xff0c;父亲又遭遇车祸&#xff0c;现在依然瘫痪在床&#xff0c;意识都尚未清醒&#xff0c;母亲却依然杳无音信。而我则刚工作2年半…

Win11 没有磁盘清理工具,如何清理磁盘旧的windows.old文件

win11 磁盘右键没有了“磁盘清理工具” 如果想清理文件&#xff0c;可以打开设置&#xff08;WinI&#xff09;系统—存储—清理建议 您也可以打开“存储感知”&#xff0c;系统会在需要时帮你自动清理文件。

脚本进阶,函数调用实例练习

一、练习&#xff1a;脚本&#xff1a;判定192.168.0.200-192.168.0.254之间哪些主机在线&#xff0c;要求&#xff1a;1、使用函数来实现一台主机的判定过程&#xff1a;2、在主程序中调用此函数判定指定范围内的所有主机的在线情况&#xff0c;vim ping.sh#!/bin/bash#PING()…

.NET开发云原生应用,你只差给自己加个油

为什么要云原生&#xff08;Cloud Native&#xff09;Cloud表示应用程序位于云中&#xff0c;而不是传统的数据中心&#xff1b;Native表示应用程序从设计之初即考虑到云的环境&#xff0c;原生为云而设计&#xff0c;在云上以最佳姿势运行&#xff0c;充分利用和发挥云平台的弹…

java成员变量的初始化

2019独角兽企业重金招聘Python工程师标准>>> 类变量(static变量,不需要实例化对象也可以引用) 实例变量(非static变量,需要实例化对象) 局部变量(类的成员函数中的变量) 初始化方式: 构造函数初始化 变量声明时初始化 代码块初始化 java自动初始化(在构造函数执行之…

Win11 的日历 替代

Win11 的日历虽然漂亮&#xff0c;却少了很多小功能&#xff0c;特别是没有秒钟和日程的设计&#xff0c;让用惯了 Win10 的小伙伴大呼不满。原来曾经用过360带的日历&#xff0c;可惜不支持Win11&#xff0c;下面这个日历是一款功能强大、颜值很高的小工具&#xff0c;能够提供…

ReactNative--React简介

React 基础框架&#xff0c;是一些实现理念&#xff0c;不能用来做网页的开发和手机应用的开发 React.js 用来做网页开发 ReactNative 移动应用开发 在学习ReactNative之前&#xff0c;先学习React http://reactnative.cn/ 中文网 http://facebook.github.io/react-nativ…

【ArcGIS微课1000例】0030:ArcGIS利用MXD doctor工具分析并修复mxd地图文档

MXD Doctor 是一个独立的应用程序,位于 ArcGIS Desktop 安装目录下的 Tools 文件夹中。该工具可用于分析已损坏的 .mxd 文件。根据分析结果,可将已损坏的 .mxd 文件中所包含的实体复制到新的或现有 .mxd 文件中。 可以从所有程序 > ArcGIS > Desktop 工具中打开 MXD Do…

分析一个 .NET 写的 某 RFID标签系统 CPU暴涨

一&#xff1a;背景 1. 讲故事前段时间有位朋友说他的程序 CPU 出现了暴涨现象&#xff0c;由于程序是买来的&#xff0c;所以问题就比较棘手了&#xff0c;那既然找到我&#xff0c;就想办法帮朋友找出来吧&#xff0c;分析下来&#xff0c;问题比较经典&#xff0c;有必要和大…

linux开机引导过程总览

简单的说&#xff0c;系统的启动过程如下&#xff1a; 1.开机自检&#xff1a; 按下电源按键后&#xff0c;计算机硬件会主动读取BIOS加载硬件信息并进行硬件的自我测试&#xff0c;然后系统会根据BIOS里的启动顺序读取第一个可启动的设备&#xff0c;从而移交系统控制权&#…

CentOS关机与重启命令详解

2019独角兽企业重金招聘Python工程师标准>>> Linux centos重启命令&#xff1a; 1、reboot  2、shutdown -r now 立刻重启(root用户使用)  3、shutdown -r 10 过10分钟自动重启(root用户使用)  4、shutdown -r 20:35 在时间为20:35时候重启(root用户使用)如果…

JS正则提取字符串

河北科技师范学院欧美学院新闻标题 河南大学迈阿密学院新闻标题 首都经济贸易大学密云分校新闻标题 北京科技大学(延庆校区)新闻标题 湖北中医药大学职业技术学院新闻标题 公安消防部队高等专科学校新闻标题 从上边的类似新闻标题中提取完整学校名称&#xff0c;最终参考代…

【工具】PC端调试手机端 Html 页面的工具

一、概述 有一个项目需要在手机端显示一个 web 页面&#xff0c;而每次把应用 launch 后&#xff0c;从手机端看比较麻烦&#xff0c;因此搜罗了几种在 PC 端调试手机端页面的工具。 二、工具 http://fonkie.iteye.com/blog/1846858 http://blog.csdn.net/dojotoolkit/article/…

【ArcGIS微课1000例】0031:ArcGIS中的32个拓扑规则(图文详解)

在地理数据库中,拓扑是定义点要素、线要素以及面要素共享重叠几何的方式的排列布置。例如,街道中心线与人口普查区块共享公共几何,相邻的土壤面共享公共边界。学习拓扑就必须掌握ArcGIS中常见的拓扑规则。 文章目录 一、面的拓扑规则(10种)二、点的拓扑规则(6种)三、线的…

Blazor University (38)JavaScript 互操作 —— 从 .NET 调用 JavaScript

原文链接&#xff1a;https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/从 .NET 调用 JavaScriptJavaScript 应添加到服务器端 Blazor 应用程序的 /Pages/_Host.cshtml 或 Web Assembly Blazor 应用程序的 wwwroot/index.html 中。然后可以通…

十大排序总结(js实现、稳定性、内外部排序区别、时间空间复杂度、冒泡、快速、直接选择、堆、直接插入、希尔、桶、基数、归并、计数排序)

目录 排序相关概念 稳定性 内部排序 外部排序 十种排序算法特点总结 交换排序 冒泡排序&#xff08;数组sort方法的原理&#xff09; 图解 js实现 特点 快速排序 图解 js实现 特点 选择排序 直接选择排序 图解 js实现 特点 堆排序 大&#xff08;小&#xff0…

三维重建技术概述

基于视觉的三维重建&#xff0c;指的是通过摄像机获取场景物体的数据图像&#xff0c;并对此图像进行分析处理&#xff0c;再结合计算机视觉知识推导出现实环境中物体的三维信息。 1. 相关概念 &#xff08;1&#xff09;彩色图像与深度图像 彩色图像也叫作RGB图像&#xff0c;…

【ArcGIS微课1000例】0032:ArcGIS中河流(曲线)、湖泊(水体色)图例制作案例教程

河流作为线要素,在符号化的过程中使用的大多都是直线符号,但是为了能够在出图的使用表现形象的河流对象,就有了使用曲线表示河流图例的需求,湖泊亦是如此。本文讲解在ArcGIS中制作标准的河流和湖泊图例的完整教程。 文章目录 一、案例效果二、图例制作三、图例修改一、案例…

从shiro源码角度学习工厂方法设计模式

绪论 shiro是一个简单易用&#xff0c;功能强大的Java安全框架&#xff0c;学习其源码设计思想对我们的编码水平的提高大有裨益。现在&#xff0c;就从源码角度带大家学习一下shiro里面的工厂方法模式。 这里的前提是读者有过使用shiro的基础&#xff0c;没有也行&#xff0c;关…