써먹는 웹개발

[Js] substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) 본문

웹개발/Js & Jquery

[Js] substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기)

kmhan 2018. 7. 12. 10:22


728x90
반응형

일단 자바스크립트에서 문자열을 자르기 위해서는 문자열의 위치번호(?) 를 알아야 합니다.


아래 그림을 참고 하세요.




위 그림의 숫자는 각 문자의 위치 번호이며 자바스크립트는 문자열의 시작위치를 0부터 순차적으로 인식 합니다.


위 문자열에서 tistory 의 위치는 9번에서 16번사이 라고 말할 수 있습니다.



huskdoll.tistory.com 문자열에서 tistory 부분을 substring 과 substr 을 이용하여 추출하는 방식을 알려 드리겠습니다.



substring([시작위치], [종료위치]);


substring 를 이용하여 자르면 substring( 9, 16 )


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
      var str = 'huskdoll.tistory.com';
      document.write( '<p>'+str+'</p>' );
      document.write( '<p>str.substring( 9, 16 ) : ' + str.substring( 9, 16 ) + '</p>' );
    </script>
  </body>
</html>




substr([시작위치], [길이]);


substr 를 이용하여 자르면 substring( 9, 7 )


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
      var str = 'huskdoll.tistory.com';
      document.write( '<p>'+str+'</p>' );
      document.write( '<p>str.substr( 9, 7 ) : ' + str.substr( 9, 7 ) + '</p>' );
    </script>
  </body>
</html>


위에서 보셨듯이 substring는 추출하려는 문자열의 시작위치와 종료위치를 입력하여 추출하는 방식입니다.


substr 같은 경우는 시작위치를 입력하고 그 시작위치부터 지정한 문자열 길이만큼 추출하는 방식입니다.



* 추가로 뒤에서 자르는 방식은 다음과 같습니다.


뒤부터 자르는 방법 : substr( str.length-3, 3 )


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
      var str = 'huskdoll.tistory.com';
      document.write( '<p>'+str+'</p>' );
      document.write( '<p>str.substr( str.length-3, 3 ) : ' + str.substr( str.length-3, 3 ) + '</p>' );
    </script>
  </body>
</html>



문자열의 길이에서 자르려는 수의 문자열 위치를 구하고 그 수 만큼 잘라주면 됩니다.



위 함수들과 같이 많이 쓰이는 함수는 indexOf 와 lastIndexOf 입니다.


두개 모두 특정 문자열의 시작위치를 구하는 함수 입니다.


indexOf 는 앞에서 부터 찾고 lastIndexOf 는 뒤에서 찾는것이 차이점 입니다.


huskdoll.tistory.com 문자열에서 . (마침표) 부분의 위치를 indexOf 와 lastIndexOf 을 이용하여 추출하는 방식을 알려 드리겠습니다.



indexOf([검색 문자열]);


str.indexOf( "." ) 의 결과는 8



lastIndexOf([검색 문자열]);


str.lastIndexOf( "." ) 의 결과는 16


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
      var str = 'huskdoll.tistory.com';
      document.write( '<p>'+str+'</p>' );
      document.write( '<p>str.indexOf( "." ) : ' + str.indexOf( "." ) + '</p>' );
      document.write( '<p>str.lastIndexOf( "." ) : ' + str.lastIndexOf( "." ) + '</p>' );
    </script>
  </body>
</html>



위에서 보셨듯이  indexOf는 문자열의 앞에서 부터 검색어를 찾아 시작위치를 알려줍니다.


lastIndexOf 는 문자열의 뒤에서 부터 검색어를 찾아 시작위치를 알려줍니다.


* 찾는 검색어가 없으면 -1 을 리턴합니다.



* 추가로 앞과 끝의 마침표 사이의 문자열을 추출해보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script>
      var str = 'huskdoll.tistory.com';
      document.write( '<p>'+str+'</p>' );
      document.write( '<p>마침표 사이 문자열: ' + str.substring(str.indexOf(".")+1, str.lastIndexOf(".")) + '</p>' );
    </script>
  </body>
</html>



* str.indexOf(".")+1 를 해준이유는 검색어의 시작위치이기 때문에 마침표 다음 위치를 추출하기 위해 +1 해주었습니다.



http://huskdoll.tistory.com/817

728x90
반응형
저작자표시

'웹개발 > Js & Jquery' 카테고리의 다른 글

[Js] 경과시간 구하기  (0) 2018.07.18
[Js] 대문자에서 소문자로 (또는 반대로) 변경하는 방법  (0) 2018.07.12
[Js] 파일첨부에 이미지만 첨부할 수 있도록 처리 input file  (0) 2018.07.11
[Js] input text 에서 엔터 입력시 페이지 이동 막기  (0) 2018.07.09
[Jquery] 기본 셀렉터(Selector) 정리  (0) 2018.07.09
'웹개발/Js & Jquery' Related Articles more


Comments