在javascript中的表情符号上悬停时添加标题
在javascript中的表情符号上悬停时添加标题
提问于 2015-09-23 01:18:15
我有这个示例代码，用于在提交消息时用表情符号替换文本。但是，我想在鼠标悬停到它上的时候添加关于表情符号的标题，以确定使用了什么类型的表情符号用户，我如何在我的当前代码中实现这一点？谢谢
<html>
<head>
<title>Testing Emoticon</title>
</head>
<body>
<input type="text" name="message" id="message">
<br><br>
<div class="results"></div>
<script language="javascript" src="./assets/js/jquery-1.11.3.min.js"></script>
<script>
function replaceEmoticons(text) {
var emoticons = {
':-)' : 'smile.png',
':)' : 'smile.png',
';)' : 'wink.png',
';-)' : 'wink.png',
':P' : 'tongue.png'
}, url = "http://localhost/cb/2/assets/img/smileys/", patterns = [],
metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;
// build a regex pattern for each defined property
for (var i in emoticons) {
if (emoticons.hasOwnProperty(i)){ // escape metacharacters
patterns.push('('+i.replace(metachars, "\\$&")+')');
}
}
// build the regular expression and replace
return text.replace(new RegExp(patterns.join('|'),'g'), function(match) {
return typeof emoticons[match] != 'undefined' ?
'<img src="'+url+emoticons[match]+'"/>' :
match;
});
}
</script>
<script>
$('#message').keypress(function(e){
if(e.which == 13){//Enter key pressed
e.preventDefault();
var emoticon = $('#message').val();
$('.results').html(replaceEmoticons(emoticon));
}
});
</script>
</body>
</html>解决了主要目的，当您键入:)时，悬停上的输出标题是来自smile.png的smile，这要感谢@PraveenKumar
另外一个问题是，我是否可以自定义标题，比如如果我键入:P，标题的输出可能是Stick Out Tongue而不是来自tongue.png的tongue？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-23 01:22:08
添加它，同时替换：
return text.replace(new RegExp(patterns.join('|'),'g'), function(match) {
return typeof emoticons[match] != 'undefined' ?
'<img src="'+url+emoticons[match]+'" title="' + emoticons[match].substr(0, emoticons[match].length-4) + '" />' :
match;
});工作箱： http://jsbin.com/cotefuwate/edit?output
Stack Overflow用户
发布于 2015-09-28 03:36:17
对于我的补充问题，我想出了一个基于我的研究和尝试错误测试的解决方案。
当我看到本·阿尔曼的链接javascript符号化时，我有了一个想法。
所以我重新构造了我的密码，然后得出这样的结论：
我修改了json数组以添加更多数据。
var emoticons = {
':-)' : ['smile.png', 'Smile'],
':)' : ['smile.png', 'Smile'],
';)' : ['wink.png', 'Wink'],
';-)' : ['wink.png', 'Wink'],
':P' : ['tongue.png', 'Stick Out Tongue']
}, url = "http://localhost/cb/2/assets/img/smileys/", patterns = [],
metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;此外，函数的这一部分与我的新的json数组匹配：
// build the regular expression and replace
return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
return typeof emoticons[match][0] != 'undefined' ?
'<img src="'+url+emoticons[match][0]+'" title="' + emoticons[match][1] + '" />' :
match;
});现在它真的能根据我的需要工作了。万岁！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32729510
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号