【Javascript】文字の操作方法

■ 文字列の使用方法
■ 「文字列（String）」オブジェクトのメソッド
■ 文字列の数字を数値に変換する方法
■ 要素内のテキストを変更する
■ 「length」メソッドの使い方
■ 「charAt」メソッドの使い方
■ 「substring」メソッドの使い方
■ 「slice」メソッドの使い方
■ 「substr」メソッドの使い方
■ 「split」メソッドの使い方
■ 「concat」メソッドの使い方
■ 「replace」メソッドの使い方
■ 「toUpperCase」メソッドの使い方
■ 「toLowerCase」メソッドの使い方
■ 「indexOf」メソッド（文字検索）の使い方
■ 「lastIndexOf」メソッドの使い方
■ 「match」メソッドの使い方
■ 「search」メソッドの使い方
■ 「charCodeAt」メソッドの使い方
■ 「fromCharCode」メソッドの使い方
■ 文字列のタグ付け方法

文字列の書式

■ エスケープ文字

\n	ニューライン（改行文字）
\f	フォームフィード
\b	バックスペース
\r	キャリッジリターン（復帰文字）
\t	タブ文字
\'	シングルクォート（'）
\"	ダブルクォート（"）
\\	バックスラッシュ（\）
\nnn	8進数による文字コード指定（例えば "A" は "\101"）
\xnn	16進数による文字コード指定（例えば "A" は "\x41"）
\unnnn	Unicode文字（例えば "あ" は "\u3042"）

Back

変数に文字列を代入＝文字列オブジェクト
変数にStringオブジェクト生成を利用して代入＝「String」オブジェクト

同じ文字でも、代入の仕方で、型が異なる。
比較演算子での比較に注意。

「String」オブジェクトのメソッド

string＝文字列、もしくは、文字列の変数。

string = new String(string)	文字列オブジェクトを生成
string.length	文字列の長さ確認
文字の取り出し
string.charAt(n)	stringのn番目の文字を返す
string.substring(from [, to])	stringのfrom～to-1文字目の文字列を返す
string.slice(from [, to])	stringのfrom～to-1文字目の文字列を返す
string.substr(from [, len])	stringのfrom番目からlen文字分の文字列を返す
文字検索
string.indexOf(key [, from])	string の from番目から後方に文字検索。
string.lastIndexOf(key [, from])	string の from番目から前方に文字検索
string.match(regexp)	正規表現 regexp に最初にマッチした部分の文字列を返す
string.search(regexp)	string から regexp にマッチする部分の位置を返す
string.charCodeAt(n)	string のn番目の文字のコード
分割と連結
string.split([sep [, limit]])	stringをsepを区切り文字として分割し配列にして返す
string.concat(string2)	stringにstring2を連結
文字の置き換え
string.replace(regexp, newString)	stringの内、regexpにマッチする部分を newStringに置き換え
String.fromCharCode(num1, ..., numN)	文字コードを文字列に変換
string.toUpperCase()	stringを大文字に変換した文字列を返す。
string.toLowerCase()	stringを小文字に変換した文字列を返す。
文字列のタグ付け
string.bold()	太字
string.italics()	斜体
string.fixed()	固定幅フォント
string.big()	大きなフォント
string.small()	小さなフォント
string.blink()	ブリンク
string.strike()	打ち消し線
string.sup()	上付き
string.sub()	下付き
string.fontcolor(color)	赤い文字
string.fontsize(size)	フォントサイズ7の文字
string.anchor(name)	アンカー
string.link(name)	リンク

Back

プログラムにおいて、
同じ数字でも、型が異なると、
それは違った値となる。
「Javascript」においても同じで、
数値は「number型」で、文字として扱われている数字は「テキスト」。
数値オブジェクトとして代入した数値は「object型」となっています。

比較演算子で比較すると、すべて異なる値として判断されるので、
数値として判断・計算したい場合は、
文字列としての数値は、数値に変換する必要がある。

数値＝普通に変数に代入した数値＝「number型」
数値オブジェクト＝Numberオブジェクトを利用して代入した数値＝「object型」


文字列として扱われている数字を、
数値に変換する方法は、
・parseInt("文字列の数字")
・parseFloat("文字列の数字")
・Number("文字列の数字")
・文字列の数字 - 0
などの方法がある。
一番簡単なのは、計算式の「文字列の数字 - 0」が簡単で良く使います。

文字列数字を数値に変換するサンプルコード

Back

テキスト情報を取得できる「Javascript」

テキスト情報を取得するサンプルコード

Back

string.length

文字列の長さ
文字列の長さ確認。

str = "あいうえお";
alert("これは" + str.length + "文字です。");


Back

string.charAt(n)

文字列の部分取り出し
stringのn番目の文字を返す。

str = "ABCDEFG";
for (i = 0; i < str.length; i++) {
document.write("[" + str.charAt(i) + "]");
}


Back

string.substring(from [, to])

文字列の部分取り出し
stringのfrom～to - 1文字目の文字列を返す。
負の値を指定すると 0 番目と見なす。
toを省略すると残りのすべてを返す。

"ABCDEFG".substring(2, 4); // "CD" を返す


Back

string.slice(from [, to])

文字列の部分取り出し
stringのfrom～to - 1文字目の文字列を返す。
to を省略すると残りのすべてを返す。

"ABCDEFG".slice(2, 4); // "CD" を返す
"ABCDEFG".slice(2); // "CDEFG" を返す


Back

string.substr(from [, len])

文字列の部分取り出し
stringのfrom番目からlen文字分の文字列を返す。
from に負の値を指定すると後ろから数える。
len を省略すると残りのすべてを返す。

"ABCDEFG".substr(2, 4); // "CDEF" を返す


Back

string.split([sep [, limit]])

文字列の分割と連結
stringをsepを区切り文字として分割し、その配列を返す。
limitは配列の個数を制限。
sepを省略するとstring全体を唯一の要素とする配列を返す。

a = "23:59:59".split(":");
document.write(a[0] + "時" + a[1] + "分" + a[2] + "秒");


Back

string.concat(string2)

文字列の分割と連結
stringにstring2を連結した物を返す。string + string2 と同義。

xx = "ABC".concat("DEF"); // xx = "ABC" + "DEF"; と同じ


Back

string.replace(regexp, newString)

文字列の置換
stringの内、regexpにマッチする部分をnewStringに置き換えたものを返す。

xx1 = "This is a pen.".replace("pen", "book");
xx2 = "AB".replace("(.)(.)",
function(str, p1, p2) {
return(p2 + p1);
});


alert( "I learn HTML".replace(/HTML/, "$& and JavaScript") ); // I learn HTML and JavaScript

記号	置換文字列での動作
$&	一致したもの全体を挿入します
$`	一致の前の部分文字列を挿入します
$'	一致した後の部分文字列を挿入します
$n	n が1-2桁の数値の場合、n番目の括弧の内容を挿入します。詳細についてはチャプター キャプチャグループ で説明します
$<name>	指定された name の括弧の中身を挿入します。詳細についてはチャプター キャプチャグループ で説明します
$$	文字 $ を挿入します

Back

string.toUpperCase()

文字列の置換
stringを大文字に変換した文字列を返す。

xx1 = "Abc".toUpperCase(); // "ABC" を返す
xx2 = "Abc".toLowerCase(); // "abc" を返す


Back

string.toLowerCase()

文字列の置換
stringを小文字に変換した文字列を返す。

xx1 = "Abc".toUpperCase(); // "ABC" を返す
xx2 = "Abc".toLowerCase(); // "abc" を返す


Back

「indexOf()」メソッドは、
JavaScriptで、文字列の中に、指定文字列があるかどうかを調べるメソッドが「indexOf」メソッド。

携帯電話・スマートフォンを検出するときなどに使われることが多い。
アクセスした端末情報を取得し、その中に携帯電話の名前があれば、PCと携帯の振り分けが簡単にできるようになる。

「indexOf()」メソッドの書式

JavaScriptでは、「navigator.userAgent」でアクセスしている端末の情報を取得できる。

あなたの「navigator.userAgent」の内容

取得した「navigator.userAgent」の情報から、「indexOf()」メソッドを利用してアクセス端末を特定する。
指定した文字列があれば、指定文字列の位置。
指定文字列がなければ「-1」を返す。


下記のように変数に値を格納して、条件分岐をすれば、PCかスマートフォンかの判定が可能になる。


Back

string.lastIndexOf(key [, from])

文字列の検索
stringのfrom番目から前方に、最初にkeyが現れる位置を、見つからない場合は-1を返す。

fileName = "xxx.gif";
if ((n = fileName.lastIndexOf(".")) != -1) {
ext = fileName.substring(n);
}


Back

string.match(regexp)

文字列のマッチング
正規表現 regexp に最初にマッチした文字列を返す。
マッチしなかった時はnullを返す。

if ("ABCDEFG".match(/def/i)) {
alert("Match");
}


Back

string.search(regexp)

文字列のマッチング
stringからregexpにマッチする部分の位置を返す。
見つからなければ -1 を返す。

if ("ABCDEFG".search(/def/i) != -1) {
alert("Match");
}


Back

string.charCodeAt(n)

文字と文字コードの変換
stringのn番目の文字のコードを返す。

c1 = "ABC".charCodeAt(0); // "A"のASCII文字コード65を返す
c2 = "あ".charCodeAt(0); // ブラウザによって動作が異なる


Back

String.fromCharCode(num1, ..., numN)

文字と文字コードの変換
文字コード num1, ..., numN で表される文字列を返す。

str = String.fromCharCode(0x41, 0x42, 0x43);
alert(str); // "ABC" が表示


Back

文字列に「タグ付け」する書式

・string.bold() - 太字（<b>）
・string.italics() - 斜体（<i>）
・string.fixed() - 固定幅フォント（<tt>）
・string.big() - 大きなフォント（<big>）
・string.small() - 小さなフォント（<small>）
・string.blink() - ブリンク（<blink>）
・string.strike() - 打ち消し線（<strike>）
・string.sup() - 上付き（<sup>）
・string.sub() - 下付き（<sub>）
・string.fontcolor(color) - 赤い文字（<font color=color>）
・string.fontsize(size) - フォントサイズ7の文字（<font size=size>）
・string.anchor(name) - アンカー（<a name=name>）
・string.link(name) - リンク（<a href=name>）


それぞれ、「string」で指定した文字列を
・<b>
・<i>
・<tt>
・<big>
・<small>
・<blink>
・<strike>
・<sup>
・<sub>
・<font color=color>
・<font size=size>
・<a name=name>
・<a href=name>
の「開始タグ」「終了タグ」で囲んだ文字列を返します。

サンプルコード

・document.write("太字".bold());
・document.write("斜体".italics());
・document.write("固定幅フォント".fixed());
・document.write("大きなフォント".big());
・document.write("小さなフォント".small());
・document.write("ブリンク".blink());
・document.write("打ち消し線".strike());
・document.write("上付き".sup());
・document.write("下付き".sub());
・document.write("赤い文字".fontcolor("red"));
・document.write("フォントサイズ7の文字".fontsize(7));
・document.write("アンカー".anchor("xxx"));
・document.write("リンク".link("index.html"));


Back