$(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;
}