-2

I am trying to apply smiley(emoji) to users comments on a page. Example all the :) will be applied css attributes replaced with. Is there a way I can use javascript or jquery to achieve this?

$(":)").css("background-image", "url('smile.gif')");

My Problem is the selector part, Since I dont want to apply the css to the whole div.

Jerry Jama
  • 1

3 Answers3

0

you need to wrp you html text ':)' with some html and then you can add css/jq to it. See below javascript code and try to add you css to "smiley" class

document.body.innerHTML = document.body.innerHTML.replace(':)', '');

Anil wagh
  • 273
  • 1
  • 14
  • I appreciate your response, but the text are users comment on the web page and no way to wrap the contents first before processing the input into the database – Jerry Jama Apr 19 '16 at 03:24
  • then instead of "document.body.innerHTML" you should write the selector where user types comments and on submit or on blur you can fire this function. Please tell me the type of element where user comments are displayed Is it span or div? – Anil wagh Apr 19 '16 at 03:30
0

Below is a possibility. I'm assuming at least that you can discern the comments section from the rest of the webpage.

$("#commentsSection").find(":contains(':)')").each(function() {
  $(this).html($(this).html().replace(
    ':)',
    '<span style="background-image: url(\'smile.gif\')" />'
  ));
});

Since you mentioned that you can't process the comments before submitting to the database, you could hook this code to the $(document).ready() event.

$(document).ready(function() {
  $("#btn").click(function() {
    $("#commentsSection").find(":contains(':)')").each(function() {
      $(this).html($(this).html().replace(
        ':)',
        '<span style="background-image: url(\'smile.gif\')" />'
      ));
    });
  });
});
/* Just for visual feedback in the snippet */

#commentsSection span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText">
  Don't replace this! :)
</div>

<div id="commentsSection">
  <h2>
    Comments:
  </h2>
  <div>
    Hello! :)
  </div>
  <div>
    Hi!
  </div>
  <div>
    Hello again! :)
  </div>
</div>

<button id="btn">
  Replace emojis
</button>
RafaelHamasaki
  • 53
  • 7
  • I appreciate all your contributions. I achieved that by creating a function forcesmile("#div_id") It finds all the emoji symbols in the div_id and replaces with the correct css properties. But the problem im having is the event i will use to initiate the function. This is because, when a user makes a comment and submit, it uses ajax to send the comments to the server and returns it as output wrapped in a div id ="newestpost" . Which event will I use to execute forcesmile("#newestpost") automatically after the ajax load. – Jerry Jama Apr 30 '16 at 18:19
  • Do you have control over the ajax call? You could use it's callback to operate on the returned div exclusively. – RafaelHamasaki Apr 30 '16 at 19:09
  • Otherwise, I suggest this solution: http://stackoverflow.com/a/16292287/2522270 (EDIT: Looks like it's deprecated) – RafaelHamasaki Apr 30 '16 at 19:14
0

Simple example:

<input type="text" id="text"/>
<div id="smiley"></div>
<script>
$(function() {
     var text=$('#text').val();

     if(text ==":)") {
       $("#smiley").append("<img src="smile.gif"/>);
     }
})
</script>
Pang
  • 9,564
  • 146
  • 81
  • 122