JSP 글자수 세기 - JSP geuljasu segi

Question

문자와 숫자의 길이 구하기 - length

문자의 길이와 숫자의 길이 구하는 것을 JSP와 JAVA, JSP 각각 알려드리겠습니다.

JAVA - length()

문자

문자는 변수에 .length() 를 써주면 됩니다.

String str = "문자의길이";

int strLength = str.length();

숫자
length()는 문자열에서 추출하는 기능이라 숫자에 쓸수없고, 아래와 같이 수학적 계산을 이용하거나! 문자열로 변경해서 length()를 사용해주시면 됩니다.

*단 숫자는 0보다 커야합니다.

int n=1000;

int intLength = (int)(Math.log10(n)+1);

JS ( 자바스크립트 ) - length

문자
자바스크립트 같은 경우는 length에서 ()괄호가 없습니다. 이점 유의해주세요.

var str = '문자의길이';

var strLength = str.length;

숫자

자바스크립트도 length는 숫자형을 지원하지않아서 숫자를 문자열로 바꿔서 length를 사용하시면 됩니다.

n = 123;

nLength = n.toString().length;

JSP ( JSTL ) - ${fn:length(" ") }

문자

JSP에서는 JSTL을 사용해서 문자열 길이를 구할수 있습니다.

상단에 아래 태그를 입력해주시고

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

이렇게 넣어주시면 구할수 있습니다.

${fn:length("문자의길이") }

숫자
JSP - JSTL에서는 안해봤고 쓸일도 없지만 찾아보도록 하겠습니다.

안녕하세요!
디자인도 하고 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 자바스크립트/제이쿼리를 사용하여
위 이미지 우측 상단에 보이는 '0자/200자'처럼 글자수를 체크하는 기능을 공유하려고 합니다.
자소서 쓸 때 많이 봤던 그림이죠?
저 글자수 채우려고 얼마나 머리를 쥐어 짜냈었는지..ㅎㅎ
자, 각설하고!

요약하면 이렇습니다.
1. 타이핑이 될 때마다 글자수가 카운트 되게 한다.
2. 200자가 넘으면 타이핑이 되지 않도록 한다.

html

textarea태그의 maxlenth 속성을 사용해서 글자수를 200으로 제한했습니다.
즉, 200자 이상 타이핑이 되지 않도록 하는 거죠.
+) 그리고 여기서 'resize: none'은 textarea의 사이즈가 조절되지 않도록 방지하는 코드입니다.

<div class="form-group col-12" >
  <div class="textLengthWrap">
    <p class="textCount">0자</p>
    <p class="textTotal">/200자</p>
  </div>
  <textarea style="height:300px; resize: none;" maxlength="200" placeholder="텍스트를 입력하세요.">
  </textarea>	
</div>

js

제이쿼리 코드를 작성해놓았는데요.
주석을 보면서 차례대로 이해를 하시면 될 것 같습니다.

맨 첫째 줄을 보시면, keyup()을 사용하여 타이핑이 될 때마다 글자수를 체크하도록 했습니다.

여기서 .val()은 value의 약자인데요.
해당 textarea에 입력한 내용을 불러오는 코드입니다.
그래서 $(this).val()을 통해 해당 textarea의 값을 content라는 변수 안에 담아주는 거죠.

그 다음 .length(길이)로 해당 내용의 길이(글자수)를 체크합니다.
글자수가 0이면 '0자'가 출력 되고
그게 아니라면, 글자수 뒤에 '자'를 붙여서 보여지게 합니다.

그리고 '// 글자수 제한' 주석 아래에 있는 내용을 봐주세요.
html에서 maxlenth 속성을 사용하여 글자수를 제한할 수도 있지만,
여기에 보이는 코드처럼 substring()을 사용하여 글자수를 자를 수도 있으니 참고해 주세요!

또, 글자수가 200자가 넘으면 alert(알림창)을 띄워서
사용자에게 200자가 초과 됐다는 내용을 인지시켜주면 더 좋겠죠?

$('#textBox').keyup(function (e) {
	let content = $(this).val();
    
    // 글자수 세기
    if (content.length == 0 || content == '') {
    	$('.textCount').text('0자');
    } else {
    	$('.textCount').text(content.length + '자');
    }
    
    // 글자수 제한
    if (content.length > 200) {
    	// 200자 부터는 타이핑 되지 않도록
        $(this).val($(this).val().substring(0, 200));
        // 200자 넘으면 알림창 뜨도록
        alert('글자수는 200자까지 입력 가능합니다.');
    };
});

자바스크립트에서 글자수를 실시간으로 알려주면서 써야할때가 있다..

(15 / 200) <-----요런거 짤때..ㅋ.ㅋ

그때 쓴 코드..

200글자 제한이라고 할때..

<script>
	$("#searchKeyword").keyup(function(e) {
	    console.log("키업!");
		var content = $(this).val();
		$("#textLengthCheck").val("(" + content.length + "/ 200)"); //실시간 글자수 카운팅
		if (content.length > 200) {
			Alert("최대 200자까지 입력 가능합니다.");
			$(this).val(content.substring(0, 200));
			$('#textLengthCheck').html("(200 / 최대 200자)");
		}
	});
</script>
<html>
	...
	<input class="keyword" type="text" placeholder="검색 키워드를 입력하세요" id="searchKeyword" name="searchKeyword">
	<input type="text" placeholder="글자 수" id="textLengthCheck">
</html>

이건 무조건 1글자씩으로 글자수를 세는 코드고..

다음은 한글은 1바이트, 영어는 2바이트로 계산해서 바이트 수로 알려주는 코드.

위 소스의 content.length 대신 이 함수로 리턴하게 바꿔주면 됨..

function getTextLength(str) {
    var len = 0;

    for (var i = 0; i < str.length; i++) {
        if (escape(str.charAt(i)).length == 6) {
            len++;
        }
        len++;
    }
    return len;
}

자바스크립트에서 입력란에 글자수를 제한하는 방법입니다. Object 의 length 함수로는 해결할 수가 없습니다. 영어와 한글의 바이트수가 틀리기 때문입니다. 한글은 2바이트, 영어는 1바이트로 다릅니다. 입력란에 길이 값을 영어는 1, 한글은 2로 계산해서 초과하지 못하도록 제한하는 방법을 사용해야 합니다.

▼ 먼저 input 박스에 입력한 값을 charAt() 함수로 하나의 글자를 분리합니다. for 반복문을 돌려 하나씩 분석하는데, 유니코드일 경우 길이를 2로 계산하고, 아스키값일 경우 1로 합니다. 아스키와 유니코드의 판단은 escape() 함수로 합니다. escape() 는 한글일때 16진수형태로 변환해주기 때문에 length 가 6 이 됩니다. 예를 들어 %u2345 같이 되는 것이죠.

for (var i = 0; i < strLen; i++) {
	oneChar = strValue.charAt(i);
	if (escape(oneChar).length > 4) {
		totalByte += 2;
	} else {
		totalByte++;
	}

	// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
	if (totalByte <= maxByte) {
		len = i + 1;
	}
}

▼ 두 번째 단락에서는 제한하는 숫자보다 입력한 값이 큰지 판단합니다. 값이 크다면 입력 가능한 크기인 len 만큼 substr() 함수를 사용해서 자릅니다. 자른 값은 input 에 obj.value = str2 로 입력합니다. 소스는 아래와 같습니다.

// 넘어가는 글자는 자른다.
if (totalByte > maxByte) {
	alert(maxByte + "자를 초과 입력 할 수 없습니다.");
	str2 = strValue.substr(0, len);
	obj.value = str2;
	chkword(obj, 4000);
}

▼ 다음은 input 박스에 입력할 글자를 제한하는 함수의 전체 소스입니다. input 박스에서 onkeyup 이벤트가 발생할 때 글자수 체크하는 함수 chkword() 을 실행합니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>ID 값 전송</title>
<script type="text/javascript">
	function chkword(obj, maxByte) {

		var strValue = obj.value;
		var strLen = strValue.length;
		var totalByte = 0;
		var len = 0;
		var oneChar = "";
		var str2 = "";

		for (var i = 0; i < strLen; i++) {
			oneChar = strValue.charAt(i);
			if (escape(oneChar).length > 4) {
				totalByte += 2;
			} else {
				totalByte++;
			}

			// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
			if (totalByte <= maxByte) {
				len = i + 1;
			}
		}

		// 넘어가는 글자는 자른다.
		if (totalByte > maxByte) {
			alert(maxByte + "자를 초과 입력 할 수 없습니다.");
			str2 = strValue.substr(0, len);
			obj.value = str2;
			chkword(obj, 4000);
		}
	}
</script>
</head>
<body>
	<input type="text" id="byteInfo" name="title"
		onkeyup="chkword(this, 5)" />
</body>
</html>