[자바스크립트] String 객체의 메소드

String 객체의 메소드

var str = 'Hello,World,successful';

메소드 이름	return 값	설명
str.charAt(1)	'e'	index의 위치에 해당하는 문자를 return
str.charCodeAt(2)	108	index의 위치에 해당하는 문자의 유니코드를 return
str.concat(',haha')	'Hello,World,successful,haha'	문자열을 뒤에 이어 붙여서 return
str.indexOf('o')	4	앞에서부터 일치하는 문자열의 위치를 return
str.lastIndexOf('o')	7	뒤에서부터 일치하는 문자열의 위치를 return
str.match('ss')	'ss'	문자열을 포함하는 지 결과를 return (없으면 null)
str.replace(',', '~')	'Hello~World,successful'	문자열을 교체
str.search('succ')	12	일치하는 문자열의 위치를 return
str.slice(0, 5)	'Hello'	특정 위치의 문자열을 추출하여 return
str.split(',')	['Hello', 'World', 'successful']	문자를 기준으로 문자열을 잘라서 배열로 return
str.substr(2,8)	'llo,Worl'	문자열을 start 부터 count 길이 만큼 잘라서 return
str.substring(2,8)	'llo,Wo'	문자열을 start 부터 end 까지 잘라서 return
str.toLowerCase()	'hello,world,successful'	문자열을 소문자로 바꿔 return
str.toUpperCase()	'HELLO,WORLD,SUCCESSFUL'	문자열을 대문자로 바꿔 return

예제 1. 이미지 태그에서 이미지 정보 가져오기

var str = '<img src="/common/images/20180108/54461865_profile01.png">';
 
var src_start = str.indexOf('src="')+5;
var src_end = str.indexOf('"', src_start);
 
var img_src = str.substring(src_start,src_end);
var filename = img_src.substring(img_src.lastIndexOf('/')+1, img_src.length);
var filename_origin = filename.substring(filename.indexOf('_')+1, img_src.length);

[코드에서 변수를 클릭해서 값 확인]

예제 2. 게시글 제목이 길 때 자르고 '...' 붙여서 처리하기

var str1 = '안녕하세요. 올 해에는 금연, 다이어트 꼭 성공합시다!';
var str2 = 'Hello. Let\'s No smoking, diet for this year!';
 
function cutTitle(str, pLeng)
{
    var leng = 0;
    for(var i = 0; i<str.length; i++)
    {
        // 한글(2 byte)인지 아닌지 판단
        leng += (str.charCodeAt(i)>128) ? 2 : 1;
 
        if(leng>pLeng) {
            return str.substring(0, i)+'...';
        }
    }
    return str;
}
 
var title1 = cutTitle(str1, 25);
var title2 = cutTitle(str2, 25);

변수	값
str1	안녕하세요. 올 해에는 금연, 다이어트 꼭 성공합시다!
str2	Hello. Let's No smoking, diet for this year!
title1	안녕하세요. 올 해에는 금...
title2	Hello. Let's No smoking, ...

※ HTML 관련 메서드

아래와 같이 문자열을 HTML 태그로 변환시켜주는 메소드도 존재

'Hello World!'.bold(); // <b>Hello World!</b>
'Hello World!'.link('www.naver.com'); // <a href='www.naver.com'>Hello World!</a>