Fügen Sie Smiley Text und das Abspielen der Bilder

Question

Bitte Jungs, ich habe ein Problem. Ich habe eine Seite, wo smileys Texte können in dem Textfeld eingefügt werden, wenn die das Bild geklickt wird und wenn die Submit-Button wird das Formular geklickt wird durch Ajax-Verfahren vorgelegt, hier ist der Code, der sehr gut funktioniert:

<form id="my_form"> 
    <textarea name="comment" id="comment" class="open" placeholder="Comment..."></textarea><br> 
    <input type="hidden" id="post" name="post" value="<?php echo $my_id; ?>" /> 
    <span id="form_span"><input type="submit" name="submit" id="submit" class="comment_send" value="COMMENT" /></span><div style="display:none;" id="form_progress"><img src='progress-dots.gif' /></div> 
    <div id="form_error" style="display:none;"><a href="javascript:;" style="float:right;margin:5px 5px;color:#fff;text-decoration:none;" onclick="document.getElementById('form_error').style.display='none'">x</a>Please make a Comment!</div> 
    <div id="emoji" class="emoji"> 
    <a href="javascript:;" title=":glad;"><img title="glad" border="0" src="emojis/smiley2.png" /></a> 
    <a href="javascript:;" title=":joy;"><img title="joy" border="0" src="emojis/smiley3.png" /></a> 
    <a href="javascript:;" title=":jeer;"><img title="jeer" border="0" src="emojis/smiley43.png" /></a> 
    <a href="javascript:;" title=":angry;"><img title="angry" border="0" src="emojis/smiley76.png" /></a> 
</div> 
    </form> 
<script src="js/jquery.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#my_form').submit(function(e) { 
       e.preventDefault(); 
       if($("#comment").val() == "") 
        { 
         $('#comment').focus(); 
        document.getElementById('form_error').style.display='block'; 
        } else { 
       $.ajax({ 
        method: "GET", 
        url: "comment_send.php", 
        data: $(this).serialize(), 
        beforeSend: function(){ 
         document.getElementById('form_error').style.display='none'; 
         document.getElementById('form_progress').style.display='block'; 
         $('#form_span').html("<input type='submit' name='submit' id='submit' class='disable_comment' value='COMMENT' disabled/>"); 
        }, 
        success: function(status) { 
         $('#comment').val(''); 
         document.getElementById('form_progress').style.display='none'; 
         $('#form_span').html("<input type='submit' name='submit' id='submit' class='comment_send' value='COMMENT' />"); 
        } 
       }); 
        } 
      }); 
     }); 
    </script> 
//to insert the emoji texts in the text area 
    <script type="text/javascript"> 
     $('#emoji a').click(function() { 
    var smiley = $(this).attr('title'); 
    ins2pos(smiley, 'comment'); 
}); 

function ins2pos(str, id) { 
    var TextArea = document.getElementById(id); 
    var val = TextArea.value; 
    var before = val.substring(0, TextArea.selectionStart); 
    var after = val.substring(TextArea.selectionEnd, val.length); 

    TextArea.value = before + str + after; 
    setCursor(TextArea, before.length + str.length); 

} 

function setCursor(elem, pos) { 
    if (elem.setSelectionRange) { 
     elem.focus(); 
     elem.setSelectionRange(pos, pos); 
    } else if (elem.createTextRange) { 
     var range = elem.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 
    </script> 

und ich benutze auch die jQuery .load Funktion die Kommentare auf der gleichen Seite angezeigt werden:

<div id="comment_display" style="width:250px;height:500px;overflow-y:auto;"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      setInterval(function() { 
       $('#comment_display').load('comment_display.php') 
      }, 1000); 
     }); 
    </script> 

und hier ist die comment_display.php Seite:

<?php 
include 'connect.php'; 
$query = mysqli_query($con, "SELECT * FROM comments ORDER BY id DESC"); 
while($row = mysqli_fetch_array($query)){ 
    $comment = $row['comment']; 

    echo "<p>".$comment."</p>"; 
    } 
    ?> 

und all dieser Code funktioniert sehr gut, aber jetzt mein Problem ist, ich die Emoji Texte ersetzt werden soll mit einem eigenen Bild gewesen Display, so dass ich diesen Code:

 <script type="text/javascript"> 

// for :glad; 
$("body").html($("body").html().replace(/:glad;/g,'<img src="emojis/smiley2.png" />')); 

// for :joy; 
$("body").html($("body").html().replace(/:joy;/g,'<img src="emojis/smiley3.png" />')); 

// for :jeer; 
$("body").html($("body").html().replace(/:jeer;/g,'<img src="emojis/smiley43.png" />')); 

// for :angry; 
$("body").html($("body").html().replace(/:angry;/g,'<img src="emojis/smiley76.png" />')); 
    </script> 

Aber wenn ich hinzufügen, um diesen letzten Javascript-Code zu die emoji-Bilder, um die Emojis Texte ersetzen, welche die emoji Texte in den Textbereich fügt stoppt zu arbeiten, wenn ich sie klicken sie nichts tut

Answer 1

ich habe kleine Demo erstellt, die nur ein Wort ersetzen

$("button").on('click', function() { 
 
    var txt = $("textarea").val(); 
 
    var newtxt=txt.replace(/:glad/g, '<img src="emojis/smiley76.png" />'); 
 
    $("textarea")[0].innerText=newtxt; //YOU HAVE TO SET NEW TXT IN TEXTAREA 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea cols="5" rows="5">:glad</textarea> 
 
<button> 
 
    click 
 
</button>

kann b Sie verwendet $ haben (Körper) .html() das ist, warum es nicht working..This nicht erlaubt, deine Antwort B, aber Sie können Idee zu bekommen, was in Ihrem Code fehlt ..