[JavaScript] String(문자 index찾기, 문자열추출, 분리하기)

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string</title>
<script type="text/javascript">
	
	function strTest04(){
		var str = "홍길동 이순신 유재석 강호동 홍길동 김선달";
		
		// indexOf : 왼쪽 -> 오른쪽 검색
		// lastIndexOf : 오른쪽 -> 왼쪽 검색
		// 만일, 검색하는 단어가 없으면 -1 반환
		var prop = prompt("검색할 이름을 작성해 주세요");
		alert("indexOf : " + str.indexOf(prop));
		alert("lastIndexOf : " + str.lastIndexOf(prop));
	}
	
	function strTest05(){
		var strVal = "문자열 추출하기. 관련 메소드 : indexOf,substring.";
		var start = strVal.indexOf(":");
		var end = strVal.lastIndexOf(".");
		var res = strVal.substring(start+1, end);
		alert(res);
		
		// indexOf,substring
		var splitVal = res.split(",");
		for(var i = 0; i <splitVal.length; i++){
			alert(splitVal[i]);
		}
	}

	
	function strTest06(){
		var prop = prompt("쉼표로 구분하여 키워드를 입력하세요", "예)사과,바나나,키위,수박");
		var splitVal = prop.split(",");
		var res = "";
		for(var i = 0; i < splitVal.length; i++){
			res += splitVal[i] + "<br>";
		}
		document.getElementById("key").innerHTML = res;
	}

</script>
</head>
<body>
	
	<p>문자열 검색하기
		<button onclick="strTest04();">클릭</button>
	</p>
	
	<p>문자열 추출하기
		<button onclick="strTest05();">클릭</button>
	</p>
	
	<p>키워드 나누기
		<button onclick="strTest06();">클릭</button>
		<div id="key"></div>
	</p>

</body>
</html>

function strTest04(){
	var str = "홍길동 이순신 유재석 강호동 홍길동 김선달";
		
	// indexOf : 왼쪽 -> 오른쪽 검색
	// lastIndexOf : 오른쪽 -> 왼쪽 검색
	// 만일, 검색하는 단어가 없으면 -1 반환
	var prop = prompt("검색할 이름을 작성해 주세요");
	alert("indexOf : " + str.indexOf(prop));
	alert("lastIndexOf : " + str.lastIndexOf(prop));
}

"홍길동 이순신 유재석 강호동 홍길동 김선달"이 저장 되어있는 변수에 indexOf 를 사용했을때는 왼쪽에서부터 문자를 찾습니다.

따라서 0이 출력이 됩니다. lastIndexOf의 경우 오른쪽부터 찾게 됩니다.

오른쪽부터 왼쪽으로 순차적으로 문자를 찾지만 문자를 발견하면 그 문자의 index는 왼쪽부터 계산합니다.

function strTest05(){
	var strVal = "문자열 추출하기. 관련 메소드 : indexOf,substring.";
	var start = strVal.indexOf(":");
	var end = strVal.lastIndexOf(".");
	var res = strVal.substring(start+1, end);
	alert(res);
		
	// indexOf,substring
	var splitVal = res.split(",");
	for(var i = 0; i <splitVal.length; i++){
		alert(splitVal[i]);
	}
}

function strTest06(){
	var prop = prompt("쉼표로 구분하여 키워드를 입력하세요", "예)사과,바나나,키위,수박");
	var splitVal = prop.split(",");
	var res = "";
	for(var i = 0; i < splitVal.length; i++){
		res += splitVal[i] + "<br>";
	}
	document.getElementById("key").innerHTML = res;
}

spilt은 제가 자바를 사용할때 정말 많이 사용하는 함수입니다!

spilt 함수에 문자를 자를 기준으로 사용된 것으로 잘라내어 배열로 만들어줍니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] 팝업창!(pop up) (0)	2022.01.22
[JavaScript] 배열(Array) (0)	2022.01.21
[JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등) (0)	2022.01.19
[JavaScript] math (0)	2022.01.18
[JavaScript] date(날짜) (0)	2022.01.17

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바