JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="header">Initial Plain Text</div>
    <div id="one" class="content"></div>
</div>
<div class="box">
    <div class="header">Plain to RTF</div>
    <div id="two" class="content"></div>
</div>
<div class="box">
    <div class="header">RTF to Plain</div>
    <div id="three" class="content"></div>
</div>

CSS

div.box {
    margin:10px;
    padding:5px;
    border:1px solid #7CB3FC;
}
div.header {
    font-size:small;
    color:#7CB3FC;
}
div.content {
    margin-top:5px;
}

JavaScript

var plainText = "This is some test text.\n\nThis is the second line\n\n...third line";
var rtf = convertToRtf(plainText);
var plainText2 = convertToPlain(rtf);

$("#one").html(plainText.replace(/\n/g, "<br/>"));
$("#two").html(rtf.replace(/\n/g, "<br/>"));
$("#three").html(plainText2.replace(/\n/g, "<br/>"));

function convertToRtf(plain) {
    plain = plain.replace(/\n/g, "\\par\n");
    return "{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang2057{\\fonttbl{\\f0\\fnil\\fcharset0 Microsoft Sans Serif;}}\n\\viewkind4\\uc1\\pard\\f0\\fs17 " + plain + "\\par\n}";
}

function convertToPlain(rtf) {
    rtf = rtf.replace(/\\par[d]?/g, "");
    return rtf.replace(/\{\*?\\[^{}]+}|[{}]|\\\n?[A-Za-z]+\n?(?:-?\d+)?[ ]?/g, "").trim();
}