텍스트에 사용된 글자 목록 뽑기

텍스트에 사용된 글자 목록 뽑기

 

자주 필요한 건 아니지만 간혹 텍스트에 어떤 글자들이 포함되어 있는지 확인해보아야 할 때가 있다.

개인적으로는 사용자 입력 없이 정해진 텍스트를 표시하는 페이지에 사용할 웹폰트를 만들 때 자주 사용한다.

이스케이핑 처리가 예외가 많아 헷갈려서 그냥 주요 특수기호는 제거하고 처리함.

사용언어 및 라이브러리

Javascript, jQuery

소스코드

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

function uniqueChar(){
	var original = $('#toConvert').val();
	var counted = Array(); // 공백, 줄바꿈, 탭문자, 특수기호 제거
	original = original.replace(/[\s\t\n\r]/gi, '');
	original = original.replace(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\(\=]/gi,''); // 중복문자열 제거
    
	for (var i = 0 ; i < original.length ; i++){
		if (counted.indexOf(original.substr(i,1)) < 0 ){
			counted.push(original.substr(i,1));
		}
	}
     
	// 추출된 글자 배열을 오름차순 정렬
	counted.sort();
     
	// 배열을 스트링으로 변환
	var returntxt = '';
	for (var i = 0 ; i < counted.length ; i++){
		returntxt += counted[i];
	}
     
	// 결과 출력
	$('#Converted').val(returntxt);
};

<h3>Input</h3>
<div>
	<textarea class="form-control" rows="10" style="width:100%;" id="toConvert"></textarea>
	<span class="byte" id="input-byte">0</span>
</div>
<h3>Output</h3>
<div>
	<textarea class="form-control" rows="10" style="width:100%;" id="Converted"></textarea>
	<span class="byte" id="output-byte">0</span>
</div>

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

 

스크린샷