Bien afficher les caractères spéciaux depuis le texte d'un textarea

Bonjours,

Je récupère la valeur d'un textarea pour l'afficher dans une div, j'aimerais que ce qui est tapé dans le textarea soit respecté au maximum dans le div (les espaces, les tab, les retours arrière pour l'effacement etc...) et ce avec du code maison (je sais que Vue.JS peut faire ce que je veux)

J'arrive à garder les retours à la ligne en remplaçant les \n par des br, mais c'est plus compliqué pour les espaces, les retours arrière (il ne prend pas en compte les mots que j'efface), et les tabs.

Surtout qu'en plus il ne récupère pas totalement ce que je tape dans mon textarea (je suis obligé de faire un retour à la ligne pour qu'il affiche la dernière lettre du mot).

Donc voici ma question :
Comment feriez-vous (en théorie) pour que le tab, le retour arrière et l'espace soit prit en compte dans ma div.
Et si vous avez une solution pour mon problème de mot pas complet je ne dis pas nan :D

Voici mon code :

$(document).ready(function(){
    var textarea = $('textarea');
    var preview = $('.preview');
    textarea.keypress(function(){
        var t = $(this).val().replace(/\n/g, "<br />"); // Pour gérer le retour à la ligne
        var t = $(this).val().replace("nbsp", " "); // Pour gérer l'espacement
        preview.html(t);
    })
});