JSFiddle - React, Tailwind, and code Playground

by shin2012

HTML

<h4>입력</h4>
<div>
    <textarea id="toConvert" class="form-control" style="width: 100%; overflow-y: auto;" rows="5"></textarea>
    <span class="byte" id="input-byte">0</span>
</div>
<h4>결과</h4>
<div>
    <textarea id="Converted" class="form-control" style="width: 100%; overflow-y: auto;" readonly="readonly" rows="5"></textarea>
    <span class="byte" id="output-byte">0</span>
</div>

CSS

* {
  font-family: Apple SD Gothic Neo, Sans-Serif;
  font-weight: normal;
}

span.byte {
	position: relative;
	float: right;
	text-align: center;
	bottom: 40px;
	right: 5px;
	background: rgba(255, 235, 205, 0.5);
	padding: 3px 6px;
	color: darkred;
	border-radius: 3px;
}

JavaScript

$(document).ready(function(){
    $('#toConvert').on('keyup', function () {
        uniqueChar();
        $('#input-byte').html($('#toConvert').val().length);
        $('#output-byte').html($('#Converted').val().length);
    });
    $('#toConvert').focus();
});

function uniqueChar(){
    const original = $('#toConvert').val();
    let counted = []; // 공백, 줄바꿈, 탭문자, 특수기호 제거
    let processed = original.replace(/[\s\t\n\r]/gi, '');
    processed = processed.replace(
        /[\{\}\[\]\/?.,;:|)*~`!^\-_+┼<>@#$%&amp;'\"\\(\=]/gi,
        ''
    ); // 중복문자열 제거

    for (let i = 0; i < processed.length; i++) {
        if (counted.indexOf(processed.substr(i, 1)) < 0) {
            counted.push(processed.substr(i, 1));
        }
    }

    // 추출된 글자 배열을 오름차순 정렬
    counted.sort();

    // 배열을 스트링으로 변환
    let returntxt = '';
    for (let i = 0; i < counted.length; i++) {
        returntxt += counted[i];
    }

    // 결과 출력
    $('#Converted').val(returntxt);
}