페이지 목차
String Object
String object 는 크게 나누어 font와 text 등 글꼴을 다루는 형태에 관련된 Method 와 문자열에서 필요한부분을 다루는 문자열 데이터와 관련된 Method로 구분할 수 있습니다. 이 번 페이지에서는 이러한 Method 들에 대해 자세히 알아 보도록 하시져...
NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
| String Object Property |
| Properties |
설 명 |
NN |
IE |
| length |
문자열의 개수 return |
2.0 |
3.0 |
length Property
length Property는 앞의 Form collection에서도 다루었던 Property로서 Tag의 갯수를 count하는 Property이지만 문자열의 개수(byte)를 세어 주기도 합니다. 참고로 IE에서는 한글을 1 byte로 , NN에서는 2 byte로 처리한다고 하는데 확인해 보지는 않았심다... 그리고 space도 1 byte를 차지한다는 사실... 아래의 예제를 봅시다.
문자열의 개수 세기
<html>
<head>
<title>length Property</title>
<script type="text/javascript">
<!--
var str1 = "Web design"
var str2 = "웹 디자인"
document.write("<br />")
document.write("str1는 " + str1.length + " byte 이고 <br />")
document.write("str2는 " + str2.length + " byte 입니다.")
// -->
</script>
</head>
<body>
</body>
</html>
font와 text 다루는 Method
NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
| font와 text 다루는 Method |
| Methods |
설 명 |
NN |
IE |
| anchor(anchorName) |
문자열을 anchor로 return |
2.0 |
3.0 |
| big() |
문자열을 큰 글자로 return |
2.0 |
3.0 |
| blink() |
문자열을 깜박거리는 글자로 return (Netscape Only) |
2.0 |
|
| bold() |
문자열을 굵은 글자로 return |
2.0 |
3.0 |
| fixed() |
문자열을 고정 간격 문자로 return |
2.0 |
3.0 |
| fontcolor(colorvalue) |
문자열을 색상(font color) return |
2.0 |
3.0 |
| fontsize(integer) |
문자열 지정하는 크기의 글꼴로 return |
2.0 |
3.0 |
| italics() |
문자열을 기울임 문자로 변환 |
2.0 |
3.0 |
| link(URL) |
문자열을 Hyperlink로 return |
2.0 |
3.0 |
| small() |
지정하는 문자열을 작은 font size로 return |
2.0 |
3.0 |
| strike() |
문자열을 가운데 줄친 문자로 return |
2.0 |
3.0 |
| sub() |
문자열을 아래 첨자로 return |
2.0 |
3.0 |
| sup() |
문자열을 위 첨자로 return |
2.0 |
3.0 |
| toLowerCase() |
문자열을 소문자로 return |
2.0 |
3.0 |
| toUpperCase() |
문자열을 대문자로 return |
2.0 |
3.0 |
font와 text 관련 Method 예제 <html>
<head>
<title>String Object</title>
<script type="text/javascript">
<!--
var dw = document.write //타자치기 귀찮을 땐 이렇게도 하지요...^^
var eng = "Web design"// 영어 문자열 지정
var kor = "웹디자인" // 한글 문자열 지정
var point="design"
var start = 2
var URL = "http://www.cadvance.org" // URL 문자열 지정
var atn = 2
var fcolor="green" // font색상 지정
var ftn = 2 // font Size 지정
var _log="10"
var x = 0
var y = 3
var n="n"
dw("eng.anchor(URL) = " + eng.anchor(URL) + "<br />") // anchor URL 지정
dw("eng.big() = " + eng.big() + "<br />") // 큰글자
dw("eng.blink() = " + eng.blink() + "<br />") // 깜빡이는 글자
dw("eng.bold() = " + eng.bold() + "<br />") // 굵은 글자
dw("eng.charAt(" + atn + ") = " + eng.charAt(atn) + "<br />") // 지정 위치 글자
dw("eng.fixed() = " + eng.fixed() + "<br />") // 고정 간격 글자
dw("eng.fontcolor(" + fcolor + ") = " + eng.fontcolor(fcolor) + "<br />") // 글자 색상 지정
dw("eng.fontsize(" + ftn + ") = " + eng.fontsize(ftn) + "<br />") // 글자 폰트 크기 지정
dw("eng.italics() = " + eng.italics() + "<br />") // 이태릭(기울여 쓰기)
dw("eng.link(URL) = " + eng.link(URL) + "<br />") // 연결 URL
dw("eng.small() = " + eng.small() + "<br />") // 작은 글자
dw("eng.strike() = " + eng.strike() + "<br />") // 줄긋기로 지운 글자
dw("eng.sub() = " + eng.sub() + "<br />") // 아래 첨자
dw("log 10.sub() = log" + _log.sub() + "<br />") // log10 표현
dw("eng.sup() = " + eng.sup() + "<br />") // 윗첨자
dw("15 n.sup() = 15" + n.sup() + "<br />") // n승 표현
dw("eng.toLowerCase() = " + eng.toLowerCase() + "<br />") // 소문자로 변환
dw("kor.toLowerCase() = " + kor.toLowerCase() + "<br />") // 한글은 소용없음
dw("eng.toUpperCase() = " + eng.toUpperCase() + "<br />") // 대문자로 변환
// -->
</script>
</head>
<body>
</body>
</html>
문자 데이터 다루는 Method
문자열 데이터를 다루는 Method에 대해 예제를 통해 알아 보도록 하겠습니다. 문자열 데이터를 다룰 때 항상 기억해야 될 것은 첫 번째 문자의 위치를 count 할 때 '0' 에서 부터 시작한다는 사실이 되겠군요. Web Design이라는 문자열을 sample로 예제를 진행 하도록 하겠습니다.
NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
| 문자 데이터 다루는 Method |
| Methods |
설 명 |
NN |
IE |
| charAt(index) |
문자열에서 지정하는 위치의 문자 return |
2.0 |
3.0 |
| charCodeAt(string) |
지정하는 문자의 Unicode 값return |
4.0 |
4.0 |
| concat(string) |
2 개의 문자열을 합쳐서 하나의 문자열을 return |
4.0 |
|
| fromCharCode(unicodes) |
지정하는 Unicode의 문자값(들) return. charCodeAt 과 반대. |
4.0 |
4.0 |
| indexOf(index) |
문자열에서 지정하는 특정문자의 위치 return. 0에서 시작해서 왼쪽에서 오른쪽으로 count 함. -1 값이 나오면 지정하는 문자 없음. |
2.0 |
3.0 |
| lastIndexOf(index) |
문자열에서 지정하는 특정문자의 위치 return. indexOf()와 반대로 0 에서 시작해서 오른 쪽에서 왼 쪽으로 count함. -1 값이 나오면 지정하는 문자 없음. |
2.0 |
3.0 |
| match(string) |
문자열에서 지정하는 특정문자와 일치하는 문자열 return. |
4.0 |
4.0 |
| replace(string1, string2) |
문자열에서 지정하는 특정문자를 지정하는 다른 문자로 변환한 문자열 return. |
4.0 |
4.0 |
| search(string) |
문자열로 부터 지정하는 특정문자를 검색하여 첫 문자의 위치 return. 없으면 -1 return |
4.0 |
4.0 |
| slice(index1, index2) |
slice Method는 문자열 중에서 index1을 포함하고 index2를 제외한 부분의 문자열을 return |
4.0 |
4.0 |
| split(string) |
문자열에서 지정하는 문자를 ',' (comma) 로 분리하여 문자열을 return |
4.0 |
4.0 |
| substr(index1, integer) |
문자열을 index1로 지정한 위치로부터 integer로 지정하는 길이만큼의 문자열 return |
4.0 |
4.0
|
| substring(index1, index2) |
문자열을 index1부터 index2 이전 까지의 문자열 return |
2.0 |
3.0 |
charAt(index) 예제
아래의 표에 표시한 것 처럼 0 에서 시작해서 위치 2에 해당하는 문자 'b' 를 return 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.charAt(2))
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
charCodeAt(string) & fromCharCode(unicodes) 예제
str.charCodeAt(0) 은 변수 str 의 첫 번째 문자인 W를 의미하고 1 은 e .... 이런 식으로 위치를 지정하여 Unicode 번호를 return 받습니다. 반대로 fromCharCode 의 경우 Unicode 번호를 입력하여 ISO-Latin-1 character set 중에서 해당 문자를 return 받게 되져... 이 때 fromCharCode 앞에 반드시 String keyword를 사용해야 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.charCodeAt(0) + "<br />")
document.write(str.charCodeAt(1) + "<br />")
document.write(str.charCodeAt(2) + "<br />")
document.write(str.charCodeAt(3) + "<br />")
document.write(str.charCodeAt(4) + "<br />")
document.write(str.charCodeAt(5) + "<br />")
document.write(str.charCodeAt(6) + "<br />")
document.write(str.charCodeAt(7) + "<br />")
document.write(str.charCodeAt(8) + "<br />")
document.write(str.charCodeAt(9) + "<br />")
document.write(String.fromCharCode("87","101","98") + "<br />")
// -->
</script>
</body>
| code |
87 |
101 |
98 |
32 |
100 |
101 |
115 |
105 |
103 |
110 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
concat(string) 예제
concat은 concatenate의 약자로서 '연결시킨다'는 단어의 뜻 처럼 2개의 문자열을 합친 문자열을 return 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str1 = "Web"
var str2 = "design"
document.write(str1.concat(" design") + "<br />")
document.write("Web ".concat(str2) + "<br />")
// -->
</script>
</body>
indexOf(index) & lastIndexOf(index) 예제
indexOf Method는 0 에서 시작해서 오른쪽으로 count하고 lastIndexOf는 오른쪽 끝에서 왼쪽으로 count 해서 처음 만나는 'e' 의 위치를 return 해 줍니다. 일치하는 문자가 없으면 -1 을 return 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.indexOf("e") + "<br />")
document.write(str.lastIndexOf("e") + "<br />")
document.write(str.indexOf("c"))
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
match(string) 예제
match Method는 문자열에서 지정하는 특정문자와 일치하는 문자열 return 합니다. 일치하는 문자가 없으면 null(아무 것도 없음) return.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.match("design") +"<br />")
document.write(str.match("besign"))
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
replace(string1, string2) 예제
replace Method는 문자열에서 지정하는 특정문자를, 지정하는 다른 문자로 변환한 문자열로 return해 줍니다. 일치하는 문자가 없으면 아무 변화없이 출력.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.replace("design", "<b style='color:tomato;'>design</b>") + "<br />")
document.write(str.replace("html", "<b style='color:tomato;'>design</b>"))
// -->
</script>
</body>
search(string) 예제
serach Method는 문자열로 부터 지정하는 특정문자를 검색하여 첫 문자의 위치 return 합니다. 없으면 -1 return.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
var search_1 = str.search("design")
var search_2 = str.search("xy")
document.write(search_1 + "<br />")
document.write(search_2)
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
slice(index1, index2) 예제
slice Method는 문자열 중에서 index1을 포함하고 index2를 제외한 부분의 문자열을 return 해 줍니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.slice(0, 3))
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
split(string) 예제
split Method는 문자열에서 지정하는 문자를 ',' (comma) 로 분리하여 문자열을 return해 줍니다. 지정한 문자와 일치하는 문자가 없으면 변화없이 return.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.split("e") + "<br />")
document.write(str.split(" ") + "<br />")
document.write(str.split("k"))
// -->
</script>
</body>
substr(index1, integer) 예제
문자열을 index1로 지정한 위치로부터 integer로 지정하는 길이만큼의 문자열 return 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.substr(0, 3) + "<br />") // 0에서 부터 3개 = Web
document.write(str.substr(4, 6) + "<br />") // 4에서 부터 6개 = design
document.write(str.substr(2, 3) + "<br />") // 2에서 부터 3개 = b d
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
substring(index1, index2) 예제
문자열을 index1부터 index2 이전 까지의 문자열 return 합니다. 이 때 index2가 index1 보다 크다고 가정합니다. index1만 주면 그 이후의 문자를 모두 return 하고 index를 주지 않으면 전체를 return 합니다.
Source code
<body>
<script type="text/javascript">
<!--
var str = "Web design"
document.write(str.substring(0, 3) + "<br />")
document.write(str.substring(3, 0) + "<br />")
document.write(str.substring(2) + "<br />")
document.write(str.substring())
// -->
</script>
</body>
| Count |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| String |
W |
e |
b |
space |
d |
e |
s |
i |
g |
n |
