I want to create emojis on my website so where ever is :D found to replace it with an image
Asked
Active
Viewed 240 times
2 Answers
0
You could right a javascript that loops through all eligible elements and regex through the innerHTML of the element (or even a simple indexOf would work). then swap out the html with your new element. could be a simple inline image.
JQuery could help you traverse through the elements. this is a very crude example would need cleanup but I think you can understand whats happening
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<style>
div.smile {
display:inline;
background: url(http://pix.iemoji.com/sbemojix2/0742.png) no-repeat;
background-size: 16px 16px;
}
</style>
</head>
<body>
<span>hello :D</span>
<div>hello :D</div>
<table>
<tr>
<td>
Hello
</td>
<td>:D</td>
</tr>
</table>
<input type="text" value ="hello :D"/>
<script>
$('div, span, td').each(function(i,e){
if(e.innerHTML.indexOf(':D')>=0)
e.innerHTML = e.innerHTML.replace(':D','<div class="smile"> </div>');
});
</script>
</body>
hope this helps

Daniel_Madain
- 491
- 4
- 9
-
It helped me a lot, but when there is more then 1 emoji it replaces just the first one, btw i change the code so it looks this like: – Hamza Feb 07 '15 at 16:44
-
Hey Hamza, the standard replace functionality replaces only the first occurrence. Here is an article that may help http://stackoverflow.com/questions/1967119/why-does-javascript-replace-only-first-instance-when-using-replace Hope this helps – Daniel_Madain Feb 09 '15 at 16:42
-
I solved it using this $body = $row['body']; $body = str_replace(":D","
",$body); – Hamza Mar 01 '15 at 19:22