JSFiddle - React, Tailwind, and code Playground

by Nadeesh Peiris

HTML

<p id="text1"><p>
<p id="text2"><p>

CSS

#text1{
    width: 100px;
    float: left;
}
#text2{
    width: 100px;
    float: left;
}

JavaScript

var str = "Rm nzgsvnzgrxh z hkvxrzo prmw lu mfnyvih vcrhgh, gszg ziv xzoovw kirnv. Z kirnv mfnyvi rh z dslov mfnyvi tivzgvi gszm 1, dslhv gdl lmob dslov-mfnyvi uzxglih ziv 1 zmw gsv mfnyvi rghvou. Vcznkov: 5 xzm lmob yv wrerwvw vevmob yb 1 li 5, hl rg rh z kirnv mfnyvi. Yfg 6 xzm yv wrerwvw vevmob yb 1, 2, 3 zmw 6, hl rg rh mlg z kirnv mfnyvi (rg rh z xlnklhrgv mfnyvi). Kovzhv, rnkovnvmg z ufmxgrlm dsrxs gvooh fh dsvgsvi z mfnyvi rh kirnv li mlg.";
str = str.toLowerCase();

var mapObj = {
	a:"?",
    b:"y",
    c:"x",
    d:"w",
    e:"v",
    f:"u",
    g:"t",
    h:"s",
    i:"r",
    j:"?",
    k:"p",
    l:"o",
    m:"n",
    n:"m",
    o:"l",
    p:"k",
    q:"?",
    r:"i",
    s:"h",
    t:"g",
    u:"f",
    v:"e",
   	w:"d",
    x:"c",
    y:"b",
   	z:"a",
   
};
str2 = str.replace(/a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z/gi, function(matched){
  return mapObj[matched];
});

str1 = str.split(' ').join('<br>');
str2 = str2.split(' ').join('<br>');

document.getElementById("text1").innerHTML = str1;
document.getElementById("text2").innerHTML = str2;