JSFiddle - React, Tailwind, and code Playground

by ethertank

HTML

<h1>Amazon アソシエイト用コードクリーナー(製作中)</h1>

<p>トラッキング用の 1px 画像から特定の属性を取り除き、href 属性中の &amp; をエスケープします。</p>

<div>
<textarea id="amazonCodeInput" cols="50">
<a href="http://www.amazon.co.jp/gp/product/B00I5CQBRG/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=B00I5CQBRG&linkCode=as2&tag=ethertank-22">
<img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00I5CQBRG&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=ethertank-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=ethertank-22&l=as2&o=9&a=B00I5CQBRG" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></textarea>
    
<div>
<button id="button">クリーニング実行</button>
</div>

</div>


<output id="output">
    <textarea id="amazonCodeOutput" cols="50"></textarea>
    <div id="previewArea"></div>
</output>

CSS

body {
    font-size: 11px;
    font-family: meiryo;
}

textarea {
    height:160px;
    word-break: break-all;
}

#previewArea {
    min-width: 100px;
}

#previewArea,
#amazonCodeOutput {
    display: inline-block;
}

.amazonTracking1pxImg {
    border: 0;
    margin: 0;
    width: 1;
    height: 1;
}

JavaScript

function init () {
    var div = document.createElement("div");
    var code = document.getElementById("amazonCodeOutput");
    var button = document.getElementById("button");
    
    function op () {
        var str = document.getElementsByTagName("textarea")[0].value;
        div.innerHTML = str;
        
        var link = div.getElementsByTagName("a")[0];
        var tImg = div.getElementsByTagName("img")[1];
        
        link.setAttribute(
            "href",
            link.getAttribute("href").replace(/\&/gmi,"&amp;and;")
        );
        
        tImg.removeAttribute("border");
        tImg.removeAttribute("style");
        tImg.removeAttribute("alt");
        
        document.getElementById("previewArea").appendChild(div);
        
        code.textContent = div.innerHTML;
    }
    
    button.addEventListener("click", op, false); 
}

window.addEventListener("load", init, false);