JSFiddle - React, Tailwind, and code Playground

HTML

<h>Showing text with just CR's were LF's were meant to go.</h>

<pre id="A"></pre>

<pre id="B"></pre>

<p id="Before"></p>

<p id="After"></p>

CSS

p, pre {margin: 1em;}

JavaScript

var tstStr = 'Line 1, with LF\nLine 2 with CR\rLine 3';

$("#A").html (tstStr);

document.getElementById ("B").innerHTML = tstStr;


function PrintStringsCharCodes (ID, str)
{
    var reportStr       = '<u>' + ID + '</u>: ';
    
    for (var J = 0, Len = str.length;  J < Len;  ++J)
    {
        var Char        = str.charCodeAt (J);
        reportStr      += Char + ', ';
        
        if (Char == 10  ||  Char == 13)
            reportStr  += '<br><br>';
    }
    
    $('#' + ID).html (reportStr);    
}


PrintStringsCharCodes ('Before', tstStr);

PrintStringsCharCodes ('After', $("#A").html () );