JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<h2>
Unterstrich nicht durch Leerzeichen ersetzen 
</h2>
<h3>
Hier zum Test Kapitelnamen als Input eingeben:<br><input id=i list=kapnamen>
</h3>
<table>
<thead><tr><td>Methode</td><td>Original</td><td>dekodiert</td></tr><tr></thead>
<tbody class="c" data-m="toAtiString_SWRde20190613T1150"></div>
<tbody class="c" data-m="toAtiString_KleinerVorschlagMefo"></div>
<tbody class="c" data-m="toAtiString_AlternativerVorschlagMefo"></div>
</table>

<datalist id="kapnamen">
<option>1. STAFFEL</option>
<option>10 Tage live aus Europa</option>
<option>2. STAFFEL</option>
<option>3. STAFFEL</option>
<option>Alle Folgen - Übersicht</option>
<option>Alle Helden</option>
<option>AM SET</option>
<option>Antworten Details</option>
<option>ARD Hörspieltage</option>
<option>Arthur und die Freunde der Tafelrunde</option>
<option>Arthurs Welt</option>
<option>Bekannt im Land</option>
<option>BEST OF...</option>
<option>BLOG FLORI</option>
<option>Buch der Woche</option>
<option>CDs  DVDs</option>
<option>Club Livemusik</option>
<option>Comedy  Kabarett</option>
<option>Computer  Netz</option>
<option>dam media</option>
<option>DAS FEST 2015</option>
<option>DAS FEST in Karlsruhe</option>
<option>Das Team</option>
<option>Debüt im Dritten</option>
<option>Dein großer Tag</option>
<option>Demi Lovato</option>
<option>Der Krieg und ich</option>
<option>Der leckerste Teller</option>
<option>Die 100 größten Rheinland-Pfälzer</option>
<option>Die größten Hits und ihre Geschichte</option>
<option>Die Kohl-Story</option>
<option>Die Montagsmaler</option>
<option>Die Pierre M. Krause Show</option>
<option>Die Redaktionsleiterin</option>
<option>Die Rezeptsucherin</option>
<option>Die SWR Reportage</option>
<option>Die Wahl in Baden-Württemberg</option>
<option>Die Wahl in Rheinland-Pfalz</option>
<option>Dienstags ein Held sein</option>
<option>DO IT YOURSELF</option>
<option>Du bist Style</option>
<option>echt gut Klink  Nett</option>
<option>Emmerich Smola Förderpreis</option>
<option>Emojis...

CSS

* {font-family:sans-serif;}
em {
  color: red;
  font-weight: bold; background-color:pink;
}
#i {font-size: 18pt; width:90%;}
table {
  width: 100%;
  min-width: 600px;
  max-width: 900px;
}

td {
  border: 1px solid silver; 
}

JavaScript

var toAtiString_SWRde20190613T1150 = function(t) {
  return "string" != typeof t ? "" : t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = t.replace(/[\xc0\xc1\xc2\xc3\xc5\xc6]/g, "A")).replace(/[\xe0\xe1\xe2\xe3\xe5\xe6]/g, "a")).replace(/[\xc8-\xcb]/g, "E")).replace(/[\xe8-\xeb]/g, "e")).replace(/[\xcc-\xcf]/g, "I")).replace(/[\xec-\xef]/g, "i")).replace(/[\xd2\xd3\xd4\xd5\xd8]/g, "O")).replace(/[\xf2\xf3\xf4\xf5\xf8]/g, "o")).replace(/[\xd9\xda\xdb]/g, "U")).replace(/[\xf9\xfa\xfb]/g, "u")).replace(/[\xc7]/g, "C")).replace(/[\xe7]/g, "c")).replace(/[\xd1]/g, "N")).replace(/[\xf1]/g, "n")).replace(/[^\wäöüß\.\/\-~]/gi, "_")
}

var toAtiString_KleinerVorschlagMefo = function(t) {
  return "string" != typeof t ? "" : t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = (t = t.replace(/[\xc0\xc1\xc2\xc3\xc5\xc6]/g, "A")).replace(/[\xe0\xe1\xe2\xe3\xe5\xe6]/g, "a")).replace(/[\xc8-\xcb]/g, "E")).replace(/[\xe8-\xeb]/g, "e")).replace(/[\xcc-\xcf]/g, "I")).replace(/[\xec-\xef]/g, "i")).replace(/[\xd2\xd3\xd4\xd5\xd8]/g, "O")).replace(/[\xf2\xf3\xf4\xf5\xf8]/g, "o")).replace(/[\xd9\xda\xdb]/g, "U")).replace(/[\xf9\xfa\xfb]/g, "u")).replace(/[\xc7]/g, "C")).replace(/[\xe7]/g, "c")).replace(/[\xd1]/g, "N")).replace(/[\xf1]/g, "n")).replace(/[^\wäöüß\.\/\-~ ]/gi, "_")
}

var toAtiString_AlternativerVorschlagMefo = function(t) {
  return "string" != typeof t ? "" : encodeURIComponent(t)
  // AT Internet dekodiert, Achtung sollte natürlich niemals doppelt encoded werden
}

/*
console.log(toAtiString_20190613T1100("SWR Aktuell Rheinland-Pfalz"));
console.log(toAtiString_KleinerVorschlagMefo("SWR Aktuell Rheinland-Pfalz"));
console.log(toAtiString_AlternativerVorschlagMefo("SWR Aktuell Rheinland-Pfalz"));
*/
$("#i").keyup(function() {
  var inp = $(this).val();
  $(".c").each(function() {
    var res = eval($(this).data("m") + "('" + inp + "')");
    $(this).html("<tr><td>"+ $(this).data("m")  +"</td><td>" + res.replace(/_/g,...