CODEWITHSUNDEEP
javascriptjqueryhtml
K. Ayaz
K. Ayaz

Reputation: 19

How to change a specific content with jQuery?

I want to add emotions to my blog. When I write ":)" on a post, it should change into an image automatically. But I don't know how to do it.

The real problem is, I don't know how to identify all ":)" emotions. I can do the rest, if I do that. So, anyone can help me?

Upvotes: -1

Views: 68

Answers (5)

Kamae
Kamae

Reputation: 551

Assuming this code:

<div id="post_1" class="post">
   Nice to meet you :) Bye bye!
</div>

You can replace the emoticon using .indexOf() and .replace() combined.

var contentReplaced = $("#post_1").html().toString().replace(":)", "<img src='path_to_image' />");
$("#post_1").html(contentReplaced);

Upvotes: 0

dustinnewbold
dustinnewbold

Reputation: 204

Try checking out :contains() selector.

$(".article:containts(':)')")

After that, you can store the text in a variable, manipulate it (find & replace), replace the text with an image, and overwrite the element's html with the new manipulated html.

https://api.jquery.com/contains-selector/

Upvotes: 1

Piotrowy
Piotrowy

Reputation: 605

You can use jquery selectors to select all elements which are conatining ':)' then try to cut it and replace it with some emotion icon.

$('p:contains(\':)\')')

Upvotes: 0

Jitendra Tiwari
Jitendra Tiwari

Reputation: 1691

I have googled your query and found some helpful libraries. Please find link below:

http://hassankhan.me/emojify.js/

https://www.npmjs.com/package/emoticons-js

Upvotes: 0

DenseCrab
DenseCrab

Reputation: 1313

Try google: https://os.alfajango.com/css-emoticons/

Never used it but looks good.

Upvotes: 0

Related Questions