Index

HOME > プログラムTOP > JavaScript




文字列処理の基本(1)

 JavaScriptの基本的なTIPS集です。ここでは文字列の基本的な機能について取り扱っていきます。文字列は、主に String オブジェクトによって表現され、様々なプロパティとメソッドが定義されています。
[PAGE1] 文字の長さ: length, charAt
連結と分割: concat, split
検索と置換: indexOf, lastIndexOf, search, match, replace
[PAGE2] 文字列の抽出: substring, substr, slice
文字の変換: toLowerCase, toUpperCase
文字の編集: bold, italics, strike, big, small, sub, sup, fixed, fontsize, fontcolor, link, anchor

sasaraan programming

Exposition

■文字の長さ

 文字列の長さ(= 文字数)は、lengthプロパティで取得することができます。文字には半角と全角があり、ほとんどのブラウザ(IE や Firefox, Safari など)は、半角も全角も1文字としてカウントします。ただし、一部のブラウザでは、全角を2とカウントしますので注意が必要です。

str.length : 文字列の長さの取得(str : Stringオブジェクト)

 文字列の中から一文字取り出す時は、charAt メソッドを利用します。この時、引数に取り出したい位置の文字インデックスを指定します。文字インデックスは0から始まり、1文字目=0, 2文字目=1, 3文字目=2 ... というように付けられます。こちらも全角を2とカウントするブラウザがありますので注意してください。ちなみに、全角一文字の長さは、"あ".length、"A".length などで求められます。

str.charAt(n) : 指定した位置の文字の取得(str : Stringオブジェクト, n : 文字インデックス)


var s = "ABC";
document.write(s.length, "<br>");        // = 3
s = "あいうえお";
document.write(s.length, "<br>");        // = 5 (または10)
var c = s.charAt(0);
document.write(c, "<br>");              // = 'あ'
c = s.charAt(3);
document.write(c, "<br>");              // = 'え'

■連結と分割

 文字同士を連結する時、通常は +演算子を使用しますが、concatメソッドも利用することができます。このメソッドは、文字列をいくつでも引数に取ることができます。また、戻り値は、連結後の文字列となります。元の文字列は変化しません。

str.concat(str1, str2, ... strN) : 文字列の連結(strX : Stringオブジェクト)

 concatとは逆に、splitメソッドを使うと、文字列を指定した文字列で分割することができます。このメソッドは分割後の文字列を配列にして返してきます。この時、分割に使用した文字列は含まれません。さらに、第2引数に配列の最大個数を指定することもできます。省略時はすべての要素を返します。

str.split(delim[, limit]) : 文字列の連結(str : Stringオブジェクト, delim : 区切り文字, limit : 最大個数)


var s1 = "ABC";
var s2 = "xyz";
var s3 = "あいうえお";
var s4 = s1.concat(s2, s3);
document.write(s4, "<br>");        // "ABCxyzあいうえお"

var s5 = "A001, A002, A003, A004, A005, A006";
var a1 = s5.split(",");
for (i=0; i<a1.length; i++) {
    document.write(a1[i], ": ");    // "A001: A002: A003: A004: A005: A006: "
}
document.write("<br>");

var a2 = s5.split(",", 3);
for (i=0; i<a2.length; i++) {
    document.write(a2[i], ": ");    // "A001: A002: A003: "
}    

■検索と置換

 シンプルな文字列検索を行う時は、indexOfメソッドを使用します。検索文字列が見つかれば、その先頭の文字インデックスを、見つからなければ -1 を返します。また、lastIndexOfメソッドを使うと、文字列の末尾から検索することができます。いずれも、第二引数に検索を開始したい位置の文字インデックスを指定することができます。省略時は文字列の先頭(indexOf使用時)または末尾(lastIndexOf使用時)から検索を開始します。

str.indexOf(key[, start]) : 文字列の検索(左から右へ)
str.lastIndexOf(key[, start]) : 文字列の検索(右から左へ)
(str : Stringオブジェクト, key : 検索文字列, start : 開始位置)

 searchメソッドを使用すると、文字列だけでなく、正規表現を利用することができます。このメソッドは、見つかった時は先頭の文字インデックスを、見つからなかった時は -1を返します。また、matchメソッドも正規表現を使用することができます。見つかれば、最初にマッチした文字列を、見つからない時は nullを返します。正規表現については文字列のチェックのページを参照してください。

str.search(regex) : 文字列の位置の確認
str.match(regex) : 文字列の確認
(str : Stringオブジェクト, regex : 確認する文字列または正規表現)

 文字列の置換は、replaceメソッドで行います。第一引数に検索文字列を、第二引数に置き換える文字列を指定して使用します。検索文字列のところは正規表現を使用することも可能です。戻り値は、置換後の文字列となります。元の文字列(検索対象の文字列)に変化はありません。

str.replace(regex, word) : 文字列の置換
(str : Stringオブジェクト, regex : 検索する文字列または正規表現, word : 置換文字列)


var s = "JavaScript Programming Sample.";

var n = s.indexOf("Programming");
document.write(n, "<br>");        // = 11
n = s.lastIndexOf("Programming");
document.write(n, "<br>");        // = 11

n = s.indexOf("Programming", 3);
document.write(n, "<br>");        // = 11
n = s.lastIndexOf("Programming", 3);
document.write(n, "<br>");        // = -1

n = s.search("Programming");
document.write(n, "<br>");        // = 11
var m = s.match(/Programming/);
document.write(m, "<br>");        // "Programming"

var v = s.replace("JavaScript", "VisualBasic");	
document.write(v, "<br>");        // "VisualBasic Programming Sample."    

www.sasaraan.net

(c) morijoh