Wie konvertiert man den Textarea-Wert in sinnvollen Inhalt, ohne die Seite neu zu laden?

Ich bekomme Wert eingegeben, von textarea und Einfügen in ein div. Der typisierte Wert kann Smileys enthalten. In diesem Fall mussten Smileys in vorzeigbare Smileys umgewandelt werden, anstatt nur den Text, der gerade eingefügt wurde, zu kopieren.Wie konvertiert man den Textarea-Wert in sinnvollen Inhalt, ohne die Seite neu zu laden?

var composer = $('[data-textarea]'); 
var message = $.trim(composer.val()); 
var wrapper = $('[data-wrapper]'); 

here the smileys has to be converted 
wrapper.append(message);

Hinweis: Ich mag nicht die möglichen Smileys wie in diesen Beiträgen ersetzen spielen: Replacing text with smiley image using Jquery

ich JQuery selbst möge auf der Browser-Einstellung sinnvoll smileys zu übersetzen abhängig.

Ich will nicht wie diese zu ersetzen:

$("body").html($("body").html().replace(/:sick;/g,'<div class="sick-face"></div>'));

Quelle

2017-01-10 112233

Haben Sie bedeuten, dass Benutzer so etwas wie 'einfügen können:)' in oder lieber ein Unicode-Zeichen wie? Und was meinst du mit "vorzeigbaren Smileys"? Die Anzeige von Unicode-Zeichen ist beispielsweise abhängig von Gerät, Browser und installierten Schriften von Benutzern. –

@Justastudent, ich meine, wenn ich :) im Textfeld, beim Anhängen an ein div, sollte es wie das Unicode-Zeichen aussehen – 112233

Wenn ich die Seite neu laden, offensichtlich seine Unicode übersetzt, aber ich brauche es funktioniert auf die gleiche Weise sogar ohne Nachladen – 112233

Sie können die Unicode-Darstellung Ihrer gewünschten smileys nachschlagen und es verwenden, um eine Zuordnung erstellen den Eingang „Text in Unicode“ Paare, dann ersetzen Text damit. Ich habe diese handliche kleine Website für Smileys gefunden, aber es gibt noch viele mehr: http://character-code.com/emoticons-html-codes.php.

Hier ist eine kleine Einrichtung und Skript an den Body-Tag hinzugefügt genau das zu tun, was ich oben beschrieben:

$(document).ready(function() { 
 
    var smileyMap = { 
 
    ':)': '&#128522;', 
 
    ':(': '&#128547;' 
 
     // etc... 
 
    }; 
 
    // on every character added 
 
    $('#myInput').keyup(function(value) { 
 
    // get the whole value 
 
    var progressiveText = $('#myInput').val(); 
 
    // replace textual smileys with unicode representation 
 
    for (var key in smileyMap) { 
 
     while (progressiveText.indexOf(key) >= 0) 
 
     progressiveText = progressiveText.replace(key, smileyMap[key]); 
 
    } 
 
    // update the html 
 
    $('#myDiv').html(progressiveText); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="myInput" type="text" name="text" /> 
 
</div> 
 
<br /> 
 
<div id="myDiv"></div>

Quelle

2017-01-10 11:41:36

Gute Antwort! Ich habe mir die Freiheit genommen, Ihre Antwort zu konvertieren, um ein Snippet zu verwenden, so dass es hier ausgeführt werden kann, und fügte auch ein while() hinzu, um sicherzustellen, dass es mehrere ersetzt. –

Gutes Denken, danke. –

Wie konvertiert man den Textarea-Wert in sinnvollen Inhalt, ohne die Seite neu zu laden?

Antwort

Verwandte Themen