JSFiddle - React, Tailwind, and code Playground

by 20na3

HTML

<div id="form">
    <textarea id="log">ログを貼付ける</textarea>
</div>

<div id="after">
     <ol class="mT5">
        <li id="one">術式：癒-壱-</li>
        <li id="two">術式：癒-弐-</li>
        <li id="three">術式：癒-拡-</li>
        <li id="four">術式：癒-拡・戦-</li>
        <li id="five">術式：癒-甘露泉-</li>
        <li id="six">術式：癒-壱・戦-</li>
    </ol>
    <textarea id="txt">キャラクター名を入力</textarea>

    <div class="wF"><button id="find" class="mCe">数えます</button></div>

    <div id="result">
                <span class="underline">結果表示欄</span>
    </div>
    <div id="line"></div>

</div>

CSS

body { padding:10px;background-color: #ddd; font: 12px sans-serif; }
div, p ,textarea,input,ol,li{ margin:0; }
textarea{
    border-color:#999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    line-height:15px;
}

button:hover{
    background:#caa;
}
button {
    width:250px;
    height:50px;
    background:#cca;
    border-top:1px;
    border-left:1px;
    margin:15px auto;
    display: block;
    cursor: pointer;
    border:1px outset buttonface #aaa;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
ol{padding:0;}
li {
    font-size:12px;
    display:block;
}
#log {
    width: 90%;
    min-height:300px;
    padding:5px;
    font-size:12px;
    border:1px solid #999;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background:url('http://jsrun.it/assets/l/4/W/u/l4Wun.png') bottom right no-repeat ;
}
#txt {
    width: 300px;
    height: 16px;
    margin-top:15px;
    overflow: hidden;
    display: block;
    font-size:12px;
    color:#666;
}
#result{
    width:90%;
    min-height:100px;
    padding:5px;
    background-color:#eee;
    font-size:12px;
    line-height:16px;
    border:1px solid #999;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#line{
    width:90%;
    min-height:100px;
    margin-top:15px;
    padding:5px;
    background-color:#eee;
    font-size:12px;
    line-height:16px;
    border:1px solid #999;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

#result span {
    width:340px;
    margin: 0 auto 5px auto;
    display:block;
    text-align:center;
}
#lists li {
    margin:3px;
    list-style-type:none;
}
.underline{
    border-bottom:1px dashed #999;
}
.dn{
    display:none;
}
.bgGreen {background-color:#363;}
.bgBlue {background-color:#336;}
.fcWhite {color:white;}
.mT5 {margin-top:5px;}
.wF {width:100%;}
.mCe {
    margin-left:auto;
    margin-right:auto;
}

JavaScript

$(document).ready(function() {
    //入力エリアの処理
    jQuery(function(){
    $("#log").focus(function(){
        if (this.value === 'ログを貼付ける'){
            this.value = '';
        }

    });
    
    $("#log").blur(function(){
        if (this.value === '') {
            this.value = 'ログを貼付ける';
        }
    });        
    $("#txt").focus(function(){
        if (this.value === 'キャラクター名を入力'){
            this.value = '';
        }
        $(this).css("background","#efe");
        $(this).css("color","#000");
    });
    
    $("#txt").blur(function(){
        if (this.value === '') {
            this.value = 'キャラクター名を入力';
        }
        $(this).css("background","#eee");
        $(this).css("color","#666");
    });
});
        
    // 抽出ボタンのクリックがトリガー
    $('#find').click(function() {
        //文字列の格納
    var log = $('#log'); 
    var one = $('#one');
    var two = $('#two');
    var three = $('#three');
    var four = $('#four');
    var five = $('#five');
    var six = $('#six');
    var txt = $('#txt');
        
        $("#result p").remove();
        $("#line p,#line ol").remove();
        
        var sOne = one.text();
        var sTwo = two.text();
        var sThree = three.text(); 
        var sFour = four.text(); 
        var sFive = five.text(); 
        var sSix = six.text(); 
        var sText = txt.val();
        var sTxt = $.trim(sText);
        var sResult = log.val(); 
        var word1 = sTxt + 'は' +sOne +'を使用した。';
        var word2 = sTxt + 'は' +sTwo +'を使用した。';
        var word3 = sTxt + 'は' +sThree +'を使用した。';
        var word4 = sTxt + 'は' +sFour +'を使用した。';
        var word5 = sTxt + 'は' +sFive +'を使用した。';
        var word6 = sTxt + 'は' +sSix +'を使用した。';

        //テキストの行数確認、文字列検索、整列
        var lines = sResult.split("\n") ;
        var item1 = "刀油";
        var item2 = "丹薬";
        var item3 = "妙薬";
        var item4 = "焙薬";
        var item5 = "兵糧丸";
        var item6 = "スケープゴート";
        var item7 = "完全修復";
        var item8 = "回復 50";
      ...