String 객체 메서드
trim()
데이터 입력 시 실수로 입력된 앞 뒤 공백같은 것을 제거시켜 데이터가 정상 입력되게 함
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () => {
// 입력
input = prompt("입력").trim();
// 길이를 비교, 앞 뒤 공백 제외 1자리 이상 입력되었는지 비교
if(input.length > 0){
alert("올바른 데이터");
} else{
alert("데이터 오류");
}
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>replace (search, value)
search하는 값을 정규식으로도 표현가능
정규식 / /
ex [0-9]{3} , [a-z] ....
만약 뒤에 g를 붙인다면 java의 replaceAll 처럼 사용이 가능하다
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc2 = () => {
// textarea요소 접근 - 값 가져오기 - value
text = document.querySelector('textarea').value;
console.log(text);
// text 엔터기호 (\r\n)를 <br>태그로 변경 후 출력
// -> 정규식 / / [0-9]{3} [a-z]
// g : global : 전체영역
text = text.replace(/\n/g, "<br>");
//result2에 출력
document.getElementById('result2').innerHTML=text;
}
</script>
</head>
<body>
<div class="box">
<h3>입력된 기호 엔터를 <br>태그로 바꿔서 출력<br>
replace(search, value)</h3>
<textarea rows="5" cols="30"></textarea>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>
spilt(구분자, 갯수)
갯수를 생략하면 전체의 배열이 저장되지만
갯수를 지정하면 앞에서 부터 갯수만큼의 배열의 길이만큼 저장된다
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc3 = () => {
const str = "홍길동/개나리/진달래/무궁화/라일락/수선화";
// arr = str.split("/",2); // ["홍길동", "개나리"]
arr = str.split("/");
let out = "";
arr.forEach(function(a, idx) {
out += ` ${idx}번째의 ${a}<br>`;
})
document.getElementById('result3').innerHTML=out;
}
</script>
</head>
<body>
<div class="box">
<h3>문자열을 배열로 변환 - 배열 메서드 join과 반대<br>split(구분자,갯수) : 갯수를 생략하면 전체를 대상으로 변환</h3>
<input type="button" value="확인" onclick="proc3()"> <br> <br>
<div id="result3"></div>
</div>
</body>
</html>slice, substring, substr
- slice(start,end); start ~ end-1까지의 문자열 추출
- substring(start, end) start ~ end-1까지의 문자열 추출
- substr(start, length) start부터 length길이만큼 추출
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const str = "String객체 테스트 문자열";
function proc1() {
let s1 = str.substring(9,13);
let s2 = str.slice(9,13);
let s3 = str.substr(9,3);
let out = `${str}<br><br> str.substring(9,13) : ${s1} <br>
str.slice(9,13) : ${s2} <br> str.substr(9,3) : ${s3}`;
document.querySelector('#result1').innerHTML=out;
}
</script>
</head>
<body>
<div class="box">
<h3>문자열 추출<br>
slice(start,end); start ~ end-1까지의 문자열 추출<br>
substring(start, end) start ~ end-1까지의 문자열 추출<br>
substr(start, length) start부터 length길이만큼 추출</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>예제
prompt로 주민등록번호를 입력 받아 생년월일과 성별, 나이를 출력하는 프로그램을 작성하시오.
예) 주민등록번호를 110326-4432618로 입력 받은 경우
생일 : 2011년 3월 26일
성별 : 여자
나이 : 12
주민등록번호를 입력 받아 주민등록번호의 유효성을 검사하는 프로그램을 작성하시오.(ABCDEF-GHIJKLM)
1. A*2 + B*3 + ... + H*9 + I*2 + ... + L*5 의 총합을 구한다.
2. 1번의 합을 11로 나눈 나머지를 구한다.
3. 11에서 2번의 결과를 뺀다.
4. 3번의 결과가 0~9이면 값 그대로, 10이면 0, 11이면 1로 변환
5. 4번의 결과와 M자리의 값이 같으면 맞는 번호이다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const str = "String객체 테스트 문자열";
function proc1() {
let s1 = str.substring(9,13);
let s2 = str.slice(9,13);
let s3 = str.substr(9,3);
let out = `${str}<br><br> str.substring(9,13) : ${s1} <br>
str.slice(9,13) : ${s2} <br> str.substr(9,3) : ${s3}`;
document.querySelector('#result1').innerHTML=out;
}
function proc2(){
// 입력
input = prompt(`주민등록번호를 입력하세요
예시) 000101-3234567`);
// 추출
let yy = input.substr(0,2);
let mm = input.substr(2,2)
let dd = input.substr(4,2);
let genNo = input.substr(7,1);
// 유효성 검사
let str = input.replace("-","");
let num = str.split();
let no = [2,3,4,5,6,7,8,9,2,3,4,5]
console.log(num);
let sum = 0;
for(let i=0; i<num.length;i++){
sum+=parseInt(num[i]*no[i]);
}
console.log(sum);
sum = 11 - (sum%11);
if(sum==10){
sum=0;
} else if(sum==11){
sum = 1;
}
console.log(input.substr(13,1));
console.log(sum);
if(input.substr(13,1)!=sum){
alert("유효성검사 실패");
return;
}
//
let year = 0;
// 비교
if(genNo==1 || genNo==2){
year = 19 + yy;
} else {
year = 20 + yy;
}
let gender = "";
// 남자 여자 비교
if(genNo==1||genNo==3){
gender="남자";
} else{
gender="여자";
}
today = new Date().getFullYear();
//나이
let age = today-year;
// 출력 내용
let out = `주민등록번호 : ${input.substring(0,8)}******<br>
생일 : ${year}년 ${mm}월 ${dd}일 <br>
성별 : ${gender}<br>
나이 : ${age}`;
document.querySelector('#result2').innerHTML=out;
}
</script>
</head>
<body>
<div class="box">
<h3>문자열 추출<br>
slice(start,end); start ~ end-1까지의 문자열 추출<br>
substring(start, end) start ~ end-1까지의 문자열 추출<br>
substr(start, length) start부터 length길이만큼 추출</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3>prompt로 주민등록번호를 입력 받아 생년월일과 성별, 나이를
출력하는 프로그램을 작성하시오.<br>
예) 주민등록번호를 110326-4432618로 입력 받은 경우<br>
생일 : 2011년 3월 26일<br>
성별 : 여자<br>
나이 : 12<br>
</h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] Window 객체 (0) | 2024.05.10 |
|---|---|
| [JavaScript] Math 객체 (0) | 2024.05.10 |
| [JavaScript] Date 객체, setInterval (+window.onload) (0) | 2024.05.08 |
| [JavaScript] Array객체 (0) | 2024.05.08 |
| [JavaScript] 리터럴 객체 / 동적함수 / 객체생성자함수 (0) | 2024.05.07 |
