$(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"; $('#line').append('<p>道具類</p><ol id="lists"></ol>'); $.each(lines,function(i) { i = i +1; $('#lists').append("<li class='dn'>"+i+"."+this+"</li>"); $("#lists li:contains('"+item1+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item2+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item3+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item4+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item5+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item6+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item7+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists li:contains('"+item8+"')").addClass("bgBlue fcWhite").removeClass("dn"); $("#lists .dn").remove();//不要な行の除去 }); var num = $('#lists li:contains("'+item1+'")'); var num2 = $('#lists li:contains("'+item2+'")'); var num3 = $('#lists li:contains("'+item3+'")'); var num4 = $('#lists li:contains("'+item4+'")'); var num5 = $('#lists li:contains("'+item5+'")'); var num6 = $('#lists li:contains("'+item6+'")'); var num7 = $('#lists li:contains("'+item7+'")'); var num8 = $('#lists li:contains("'+item8+'")'); var nums = num.length; var nums2 = num2.length; var nums3 = num3.length; var nums4 = num4.length; var nums5 = num5.length; var nums6 = num6.length; var nums7 = num7.length; var nums8 = num8.length; $("#lists").before("<p>["+item1+"]…"+nums+"["+item2+"]…"+nums2+"["+item3+"]…"+nums3+"["+item4+"]…"+nums4+"["+item5+"]…"+nums5+"<br />["+item6+"]…"+nums6+"["+item7+"]…"+nums7+"["+item8+"]…"+nums8+"</p>"); // 文字列カウント var result1 = sResult.split(word1).length-1; var result2 = sResult.split(word2).length-1; var result3 = sResult.split(word3).length-1; var result4 = sResult.split(word4).length-1; var result5 = sResult.split(word5).length-1; var result6 = sResult.split(word6).length-1; var allResult = result1 + result2 + result3 + result4 + result5 + result6; //下部エリアに結果表示 $('#result').append("<p>a."+sOne+"の回数は、"+result1+"回。</p>"); $('#result').append("<p>b."+sTwo+"の回数は、"+result2+"回。</p>"); $('#result').append("<p>c."+sThree+"の回数は、"+result3+"回。</p>"); $('#result').append("<p>d."+sFour+"の回数は、"+result4+"回。</p>"); $('#result').append("<p>e."+sFive+"の回数は、"+result5+"回。</p>"); $('#result').append("<p>f."+sSix+"の回数は、"+result6+"回。</p>"); $('#result').append("<p class='mT5'>…全てを合計すると、"+allResult+"回。</p>"); }); });
<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>
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; }