Specific string counter
How to count specific character inside text and show number in its related element.
by nobuts
HTML
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-lg-4 counter">
<strong>Input1</strong> <span class="text-danger"></span><br />
<textarea name="input2a" rows="10" class="form-control" cols="5"></textarea><br />
</div>
<div class="col-lg-4 counter">
<strong>Input2</strong> <span class="text-danger"></span><br />
<textarea name="input3a" rows="10" class="form-control" cols="5"></textarea><br />
</div>
<div class="col-lg-4 counter">
<strong>Input3</strong> <span class="text-danger"></span><br />
<textarea name="input2b" rows="10" class="form-control" cols="5"></textarea><br />
</div>
</div>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
JavaScript
$('.counter').on('keyup',function(){
var str=$('textarea').val();
var count = (str.match(/=/g) || []).length;
$(this).find('span').html(count);
});
/* Sample data
55=6
00=3
66=3
77=3
70=2
67=2
60=2
88=2
75=2
76=2
65=2
99=2
05=2
06=2
07=2
11=2
22=2
56=2
57=2
50=2
33=2
44=2
45=1
46=1
47=1
35=1
36=1
37=1
40=1
51=1
52=1
53=1
54=1
58=1
59=1
25=1
26=1
27=1
30=1
15=1
16=1
17=1
20=1
08=1
09=1
10=1
01=1
02=1
03=1
04=1
90=1
95=1
96=1
97=1
61=1
62=1
63=1
64=1
68=1
69=1
71=1
72=1
73=1
74=1
78=1
79=1
80=1
85=1
86=1
87=1
*/