[Basic] JS - String Methods - JS문자열메서드

① JS는 순서를 0부터 시작함. (예) 첫 번재는 0, 두 번재는 1, 세 번째는 2, 네 번째는 3 .......
② 순서를 셀 땐 공백까지 포함해서 셈. (예) 홈짱닷컴 homzzang.com 문자열에서 homzzang은 5번째에 처음 나타남.
③ 음수, 즉, 순서를 오른쪽에서 왼쪽으로 셀 때는 -1부터 시작함. (예) 가장오른쪽 첫 번째 -1, 가장 오른쪽 두 번째 -2, ......

1. indexOf("찾을문자열") : 문자열 내에서 특정 문자열이 처음 나타나는 위치가 몇 번째인지 보여줌. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서

    var pos = str.indexOf("홈짱");  // 홈짱 문자열이 처음 나타나는 게 몇 번째냐?

    document.getElementById("sinbi").innerHTML = pos; // 결과값 0 즉, 문자열 가장 첫 번째 처음 나타남.

}

</script>

결과값: 0

2. lastIndexOf("찾을문자열") : 문자열 내에서 특정 문자열이 마지막으로 나타나는 위치가 몇 번째인지 보여줌. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서

    var pos = str.lastIndexOf("홈짱");  // 홈짱 문자열이 마지막으로 나타나는 게 몇 번째냐?

    document.getElementById("sinbi").innerHTML = pos; // 결과값 21 즉, 21번째 마지막으로 나타남.

}

</script>

3. index("찾을문자열")나 lastIndexOf("찾을문자열") 둘다, 찾고자 하는 문자열이 존재 안 할 경우 결과값은 -1이다.

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서

    var pos = str.indexOf("HTML");  // HTML 문자열이 몇 번째에 처음 나타나냐?

    document.getElementById("sinbi").innerHTML = pos; // 결과값 -1  (즉, 안 나타난다)

}

</script>

4. search("찾을문자열") : 문자열 내에서 특정 문자열이 처음 나타나는 위치가 몇 번째인지 보여줌. 
                                        indexOf()와 같지만, 정규표현식에서 indexOf()보다 훨씬 강력한 기능 수행함. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서

    var pos = str.search("홈짱");  // 홈짱 문자열이 처음 나타나는 게 전체 문자열에서 몇 번째냐?

    document.getElementById("sinbi").innerHTML = pos; // 결과값 0 즉, 문자열 가장 첫 번째 처음 나타남.

}

</script>

1. slice(시작위치, 끝위치)  : 시작위치부터 끝위치 바로 앞까지 출력. 음수 가능.
2. substring(시작위치, 끝위치) : 시작위치부터 끝위치 바로 앞까지 출력. 음수 불가능 

3. substr(시작위치, 시작위치부터길이)

1. slice(시작위치, 끝위치) 시작위치부터 시작해 끝위치 바로 앞까지 찾아라.

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.slice(6,9); // 결과값 CSS  즉, 6번째부터 시작해 9번째 앞까지

</script>

2. slice(시작위치, 끝위치) 시작위치 끝위치가 둘다 음수인 경우엔 마지막 위치부터 계산. (끝에선 -1부터 시작함)
   아래 예제 경우, 오른쪽에서 7번째 있는 글자부터 시작해 4번째 바로 앞까지 출력함.

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.slice(-7,-4); // 결과값 CSS  즉, 오른쪽부터 계산해 찾음.

</script>

3. slice(시작위치) 즉, 끝위치가 없이 시작위치만 있을 경우, 시작위치부터 시작해 나머지 문자열 전부를 추출.

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.slice(6); // 결과값 CSS, JS  즉, 6번째부터 전부 출력

</script>

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.slice(-7); // 결과값 CSS, JS  즉, 오른쪽 7번째부터 전부

</script>

4. 음수 위치 표시. 즉 오른쪽부터 계산하는 것은 익스플로러 8 이하 버전에서는 작동 안 함.

1. 첫 번째 인자는 slice()처럼 시작위치이나, 두 번째 인자는 slice()와 달리 추출할 문자열 길이입니다.

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.substr(6, 3); // 결과값 CSS  즉, 6번째부터 시작해 3글자

</script>

2. 시작위치를 나타내는 수가 음수일 경우, 오른쪽부터 계산. 이 경우, -1부터 시작함.

3. 추출길이를 나타내는 수는 음수가 올 수 없음. 왜냐면, 추출할 문자열의 길이를 나타내기 때문임.

4. 추출길이를 생략하면, 시작위치부터 시작해 나머지 전부를 추출함.

<p id="homzzang"></p>

<script>

var str = "HTML, CSS, JS";

document.getElementById("homzzang").innerHTML = str.substr(6); // 결과값 CSS  즉, 6번째부터 나머지 전부

</script>

1. replace(찾을 문자열, 대체할 문자열)은 문자열 내 특정 문자열을 다른 문자열로 대체함.

<button onclick="myFunction()">클릭</button>

<p id="sinbi">홈짱닷컴으로 오세요!</p>

<script>

function myFunction() {

    var str = document.getElementById("sinbi").innerHTML;  // 아이디가 sinbi인 문자열을 찾아 변수 str에 할당해라

    var txt = str.replace("홈짱닷컴","homzzang.com"); // 문자열에서 홈짱닷컴을 찾아 homzzang.com으로 교체해라.

    document.getElementById("sinbi").innerHTML = txt; //아이디가 sinbi인 문자열에 바뀐 문자열로 출력시켜라.

}

</script>

결과값: homzzang.com으로 오세요!

2. replace(찾을 문자열, 대체할 문자열)은 찾을 문자열에 정규표현식을 취할 수 있음.

1.  추가할 문자열 부분이 문자열이면 따옴표로 묶고, 변수면 따옴표로 안 묶음. 만약, 여러 개를 넣을 땐 ,(콤마)로 분리

<p id="sinbi"></p>

<script>

var text1 = "홈짱닷컴"; //  변수 text1을 선언하고, text1에 문자열 홈짱닷컴을 할당

var text2 = "homzzang.com" // 변수 text2를 선언하고, text2에 문자열 homzzang.com을 할당

document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // text1에 공백과 text2에 할당된 문자열을 추가해 아이디 sinbi에 출력

</script>

2. concat() 메서드은 + 연산자 대신에 사용 가능함.

<p id="sinbi"></p>

<script>

var text1 = "홈짱닷컴";

var text2 = "homzzang.com"

document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // concat() 메서드으로 두 문자열 합침

</script>

결과값: 홈짱닷컴  homzzang.com

<p id="sinbi"></p>

<script>

var text1 = "홈짱닷컴";

var text2 = "homzzang.com"

document.getElementById("sinbi").innerHTML = text1 + " " + text2; // + 연산자를 이용해 두 문자열 합침
</script>

결과값: 홈짱닷컴 homzzang.com

[주의1] 하나의 아이디에 두개를 모두 출력시키려고 할 경우, 나중 것만 출력됨.

<p id="sinbi"></p>

<script>

var text1 = "홈짱닷컴";

var text2 = "homzzang.com"

document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // 아이디 sinbi에 출력 (결과: 출력 X)

document.getElementById("sinbi").innerHTML = text1 + " " + text2; // 아이디 sinbi에 출력 (결과: 출력 O)

</script>

결과값:  홈짱닷컴 homzzang.com 
           즉, 먼저 적은 concat()을 이용한 것은 출력 안 되고, 나중에 적은 + 연산자를 이용한 것만 출력됨.

[주의] 두 경우 모두 출력시키려면, 아래처럼 각각의 아이디를 부여

<p id="sinbi"></p>

<p id="sinbi2"></p>

<script>

var text1 = "홈짱닷컴";

var text2 = "homzzang.com"

document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // 아이디 sinbi에 출력 (결과: 출력 O)

document.getElementById("sinbi2").innerHTML = text1 + " " + text2; // 아이디 sinb2에 출력 (결과: 출력 O)

</script>

1. charAt(찾을위치) : 찾을 위치의 글자 반환
2. charCodeAt(찾을위치) : 찾을 위치의 글자를 유니코드로 반환

<p id="sinbi"></p>

<script>

var str = "홈짱닷컴 homzzang.com";

document.getElementById("sinbi").innerHTML = str.charAt(0); // 0. 즉 첫 번째 글자가 무슨 자인지 출력. 결과값: 홈

</script>

결과값: 홈

<p id="sinbi"></p>

<script>

var str = "홈짱닷컴 homzzang.com";

document.getElementById("sinbi").innerHTML = str.charCodeAt(0); // 첫 번째 글자인 '홈'의 유니코드를 출력

</script>

결과값: 54856

1. 문자열을 배열로 표현한 예

<p id="sinbi"></p>

<script>

var str = "홈짱닷컴 homzzang.com";

document.getElementById("sinbi").innerHTML = str[0] + str[1]; // 문자열을 배열로 간주해, 첫 번째와 두 번째 출력

</script>

결과값: 홈짱

 
2. 문자열을 배열로 표현하면, 브라우저에 따라 다르게 나올 수 있음. 즉, 익스 7 이하 브라우저에서 작동 안 함.

3. 배열로 보이게 만들 뿐, 실제로 배열은 아님. 즉, 배열 짝퉁일 뿐임.

4. 위 예에서, str[0] = 홈이 에러를 내지는 않지만, 그렇다고 유효한 것은 아님

5. 문자열을 배열로 접근 원하면, 일단 먼저 진짜 배열로 전환하는 게 필요함.

1. split() 메서드을 이용해 문자열을 배열로 전환 가능함. (예)  split(배열 만든 방법)

2. 배열 만드는 방법에 아래 3가지가 있음.

1. , (콤마)를 이용하는 법
2. 공백을 이용하는 법
3. | (세로막대)를 이용하는 법. |(세로막대)는 Shift키를 누른 상태에서 엔터키 위의 \키를 입력하면 됨.

2-1. split(",") : (콤마)을 이용해 문자열을 배열로 전환하는 법

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = "홈,짱,닷,컴"; // 문자열을 한자 한자 ,(콤마)로 분리

    var arr = str.split(","); //  위에서 ,(콤마)를 이용해 배열로 만들었음을 표시.

    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력

}

</script>

결과값: 홈짱

2-2. split(" ") : 공백을 이용해 문자열을 배열로 전환하는 법

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = "홈 짱 닷 컴"; // 문자열을 한자 한자 공백으로 분리

    var arr = str.split(" "); //  위에서 공백을 이용해 배열로 만들었음을 표시. 즉, "와 "사이에 한칸 띄어 공백 줌

    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력

}

</script>

결과값: 홈짱

2-3. split("|") : |(세로막대)를 이용해 문자열을 배열로 전환하는 법

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = "홈|짱|닷|컴"; // 문자열을 한자 한자 |(세로막대)로 분리

    var arr = str.split("|"); //  위에서 |(세로막대)로 배열 만들었음을 표시

    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력

}

</script>

결과값: 홈짱

3. split() 메서드에 배열을 만든 방법을 안 적을 경우엔, 첫 번째 배열에 모든 문자열을 출력시킴.

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>

function myFunction() {

    var str = "홈|짱|닷|컴"; // 일단 문자열을 한자 한자 ,(콤마)로 분리해 나열

    var arr = str.split(); //  배열을 만든 방법을 안 적음.

    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 첫 번째 배열에 모든 문자열 출력, 두 번째 별은 undefined (정의 안 됨) 출력

}

</script>

결과값: 홈|짱|닷|컴undefined

4. split("") : 배열을 만든 방법 부분에 따옴표만 적으면, 문자열을 한 글자씩 나눠 배열을 만드라는 의미임.

<p id="sinbi"></p>

<script>

var str = "홈짱닷컴 homzzang.com"; // 변수 str 선언 후, 문자열 홈짱닷컴 homzzang.com을 할당

var arr = str.split(""); // 문자열을 한 글자 단위로 나눠 배열 만듦. 총 17개 즉, 0 ~16 배열. arr[0] = 홈, arr[16] = m

var text = ""; // 변수 text를 선언하고, 아래 계산식 결과의 문자열이 들어갈 부분을 따옴표로 표시함. ※ 출력에 사용 

var i; // 변수 i를 선언 ※ for 반복문에 사용

for (i = 0; i < arr.length; i++) { // i = 0 첫 번째부터 시작, i < arr.length 배열 길이 17보다 작다면 계속 반복, i++ 하나 씩 증가

    text += arr[i] + "<br>" // i번째 배열과 <br>요소를 text 변수에 일단 더하면서 계속 text 변수에 할당

}

document.getElementById("sinbi").innerHTML = text; // 변수 text에 할당된 문자열을 아이디 sinbi 요소에 출력 

</script>

결과값:

홈
짱
닷
컴

h
o
m
z
z
a
n
g
.
c
o
m