如何使用jQuery更改特定内容？

Question

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?

Answer 1

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/

Answer 2

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

Never used it but looks good.

Answer 3

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

Answer 4

您可以使用jquery选择器选择所有包含':)'的元素，然后尝试将其剪切并替换为一些情感​​图标。

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

Answer 5

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);