Ciao,
ho un codice JS che mi prende il testo in una textarea e me lo traduce con google inserendolo in una seconda textarea.
Ora, il mio problema é che se scrivo un testo senza nessu a capo nalla prima textarea, non riscontro nessun problema, mentre se inserisco degli a capo, nella seconda textarea mi restituisce il testo tradotto ma troncato al primo a capo. Come potrei ovviare?
Il codice é il seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body translate="no" >
<textarea id="sourceText"></textarea><br><br>
<textarea id="resultText"></textarea> <input id="button" type="button" value="Translate"><br><br>
<textarea id="resultText1"></textarea> <input id="button1" type="button" value="Translate"><br><br>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$('#button').click(function () {translate();});


function translate() {
var sourceText = $('textarea#sourceText').val();
var sourceLang = 'fr';
var targetLang = 'de';
console.log(sourceText);
var url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" + sourceLang + "&tl=" + targetLang + "&dt=t&q=" + encodeURI(sourceText);
$.getJSON(url, function (data) {
$('textarea#resultText').val(data[0][0][0]);
});
}


</script>
</body>
</html>