Один предварительный просмотр смайликов только один раз

Question

Textarea не может просмотреть изображение, поэтому я делаю его прозрачным фоном и цветом, а другой div установлен за ним для предварительного просмотра значка textarea.

Теперь, когда я пишу любой текст смайлика еще раз, как «:) :) :), его заменить только 1-м. Где моя ошибка здесь, пожалуйста?

Just Предложите мне: Сколько вопросов в сообщении на складеoverflow принять? (Потому что у меня есть еще вопрос здесь также.)

var smileys = { 
 
     ':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
\t \t ':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
\t \t ':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
}; 
 

 
function smilyMe(msg) { 
 
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
 
    for (var key in smileys) { 
 
     msg = msg.replace(key, smileys[key]); 
 
    } 
 
    return msg; 
 
} 
 
$(document).ready(function() { 
 
    $(".chat > textarea").bind("keyup", function(e) { 
 
    $(".chat > div").html(smilyMe($(".chat > textarea").val())); 
 
    }); 
 
    $('#maintbox').on('keyup',function() { 
 
    $(this).css('height','auto'); 
 
    $(this).css('height',Math.max(this.scrollHeight)+'px'); 
 
    }); 
 
    $('#showhide_emobox').click(function(){ 
 
    $('#emobox').fadeToggle(); 
 
    $(this).toggleClass('active'); 
 
    }); 
 
    $(".embtn").click(function(event){ 
 
    var prevMsg = $(".chat > textarea").val(); 
 
    var emotiText = $(event.target).attr("alt"); 
 
    $(".chat > textarea").html(prevMsg + emotiText); 
 
    }); 
 
    $('textarea').elastic(); 
 
});

#maintbox { 
 
    position:relative; 
 
\t border: 2px solid #ccc; 
 
\t min-height: 50px; 
 
\t width: 450; 
 
    top:100px; 
 
} 
 
div.chat { 
 
    width: 100%; 
 
} 
 
.preview { 
 
    max-width: 400px; 
 
    font-family:Times New Roman, Times, serif; 
 
    font-size:14px; 
 
    color:#000000; 
 
    position:absolute; 
 
    top:0; left:0; z-index:997; 
 
} 
 
div.chat > textarea { 
 
    font-family:Times New Roman, Times, serif; 
 
\t font-size:14px; 
 
    margin-left:-2px; 
 
    margin-top:-2px; 
 
    margin-bottom:2px; 
 
\t min-height: 50px; 
 
\t width: 510px; 
 
    resize:none; 
 
\t float:left; 
 
    position:absolute; color:transparent; 
 
    top:0; left:0; z-index:998; background: transparent; 
 
} 
 
.em { 
 
    position:relative; 
 
    margin:1px 2px; 
 
    float:right; 
 
    height:20px; 
 
    width:20px; 
 
    text-align:center; 
 
} 
 
.em img { 
 
    margin-top:1px; 
 
    cursor:pointer; 
 
    color:white; 
 
    display:block; 
 
    transition:all 1s ease; 
 
} 
 
#emobox { 
 
    background:#fff; 
 
    display:none; 
 
    position:absolute; 
 
    width:200px; 
 
    bottom:25px; 
 
    left:-176px; 
 
    border: 2px solid #ccc; 
 
    white-space:nowrap; 
 
} 
 
#emobox img { 
 
    float:left; 
 
    position:relative; 
 
    display:inline-block; 
 
    margin:5px 5px; 
 
}

<div id="maintbox"> 
 
    <div class="chat"> 
 
    <div class="preview"></div> 
 
\t <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea> 
 
    </div> 
 
     
 
<div align="right"><img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" /> 
 
    <div class="em"> 
 
    <img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/> 
 
     <div id="emobox"> 
 
\t \t <img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":)" class="embtn" /> 
 
\t \t <img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":-)" class="embtn" /> 
 
\t \t <img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":D" class="embtn" /> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script> 
 
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>

Answer 1

Вы должны построить регулярное выражение с global search flagg заменить все вхождения.

Также должно быть экранировано special characters в ключе.

function escapeRegExp(str) { 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
} 

function smilyMe(msg) { 
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
    for (var key in smileys) { 
     msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]); 
    } 
    return msg; 
} 

Демо: http://jsfiddle.net/3v8kdg9n/

Answer 2

Javascript .Надеть() функция заменяет только первое вхождение, вам нужно что-то вроде replaceAll().

Посмотрите на эту статью

How to replace all occurrences of a string in JavaScript?