JSFiddle - React, Tailwind, and code Playground

by jq153387

HTML

<textarea id="i1" style="width:100%;height:150px;">貼上要轉換的HTML</textarea><br/>
<form action="#" method="post" class="demoForm" id="demoForm">
<br/>
選擇樣式: <input type="radio" name="payment" value="0" checked>預設 <input type="radio" name="payment" value="1" id="google">Google Code Prettify <input type="radio" name="payment" value="2">樣式1 <input type="radio" name="payment" value="3">無樣式<br/><br/>
 <button type="button" onclick="myFunction()">轉換HTML</button>   </form>
    <br>
<br/>
<textarea id="i2" style="width:100%;height:150px;">轉換完成後的HTML</textarea>
<h3>樣式表現</h3>     
<div id="ir"></div>
<div id="ex"></div>

JavaScript

String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

function myFunction(){
    var aString = document.getElementById("i1").value;
    var radios = document.getElementById('demoForm');
    for (var i=0; i<radios.payment.length; i++){
    
        if(radios.payment[i].checked){
           //alert(radios.payment[i].value);
           switch (radios.payment[i].value) {
    case "0":       
                  x=document.getElementById("i2").value='<pre style="background-color: #f8f8f8; border-radius: 3px; border: 1px solid #CCC; font-size: 12px; line-height: 19px; word-wrap: break-word; padding:10px;"><code>'+aString.htmlEncode()+'</code></pre>';
                   document.getElementById("ex").innerHTML='這是預設的基本樣式'
        break;
    case "1":
                   x=document.getElementById("i2").value='<pre class="prettyprint linenums"><code>'+aString.htmlEncode()+'</code></pre>';
                   document.getElementById("ex").innerHTML='Google Code Prettify樣式有許多表現，並非只有上面看見的，若你還沒有開始使用&#65292;只需要將下列代碼複製貼入你網站&lt;/head&gt;標籤內&#12290;<a href="#">了解更多</a><br/>&lt;script src=&quot;https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js&quot;&gt;&lt;/script&gt;';
        break;
    case "2":
        x=document.getElementById("i2").value='<pre style="padding: 10px; border-radius: 3px;  background-color: #333; color: #FFF; word-wrap: break-word; font-size:12px;"><code>'+aString.htmlEncode()+'</code></pre>';
          document.getElementById("ex").innerHTML='樣式黑底白字;';
                   break;
    case "3":
        x=document.getElementById("i2").value='<pre><code>'+aString.htmlEncode()+'</code></pre>';
          document.getElementById("ex").innerHTML='這無套用任何樣式&#65292;現在你可以用你任何想要的方式呈現它&#12290;';
                   break;
}     document.getElementById("ir").innerHTML=x;
    }
       
   ...