JavaScript 文字列操作

提供：yonewiki

JAVA Script#リファレンスに戻る。 　

文字列も配列として管理されているのですが、JavaScriptでは、あまり配列を意識せずに一つの変数のなかに文字列、文章を格納することができます。文字列オブジェクト変数として定義された変数に対しては、文字列を扱いやすくするためのメソッドが準備されていて、様々な操作ができるようになっています。文字列をどのように変数として扱うオブジェクトにするのか、どういった操作ができて、どういうふうに使うことができるのかをひとつづつを確認していきたいと思います。


文字列オブジェクトの生成 String

文字列オブジェクト(入れ物・モノ)を生成するには、以下のように定義します。

  • Data1Arr = new String() //空の文字列
  • Data2Arr = new String("JavaScriptは楽しい。まるで麻薬のようだ。")//もちろん文字列で初期化できます。
  • Data3Arr = new String(20160712) //数値も文字列として格納します。


2番目は2ちゃんねるのAA板でみかけた印象的なスレッドで、”チャーハンはおいしい。まるで麻薬のようだ。”から引用しています。ストーリー系のAAスレッドで、とにかくオチがチャーハンを作る流れになっていて最後は上記のキーワードで終わるという、素晴らしいストーリーが無数にあったのを思い出します。java scriptを真剣に学ばれているみなさんからすれば、どうでもいいですね。


サンプルプログラムは以下のとおりです。 


<HTML>
<HEAD>
<TITLE>JavaScript Array</TITLE>
</HEAD>
<BODY>
JavaScript Array<br />
<SCRIPT Language="JavaScript">
<!--
strData1 = new String();
strData2 = new String("java scriptは楽しい。まるで麻薬のようだ。");
strData3 = new String(771);

strData3 = strData3 + 7;

document.write("■String<br />");
document.write("strData1 = ", strData1, "<br />");
document.write("strData2 = ", strData2, "<br />");
document.write("strData3 = ", strData3, "<br />");

-->
</SCRIPT>
</BODY>
</HTML>

サンプル実行結果

文字列の出力時装飾系メソッド

文字列出力の装飾処理として、ここに記述するようなメソッドがありますが、もっと詳細なフォントやテキスト表示制御を指定するための方法として、DOM(ドキュメントオブジェクトモデル)という巨大な構造を持つオブジェクトとしてテキストを扱う方法があります。こちらではXMLのようなHTMLそのものともいえるマークアップ構造自体を制御するためのメソッドまで含まれており、より高度な制御が可能になります。ここではStringオブジェクトとして準備されている単純なメソッドのみを紹介します。


document.writeなどの出力命令時に指定しなければ、無視されてしまいます。そのことは最初の項目のハイパーリンクで示したいと思います。また、メソッドは例えばstrDataというStringオブジェクトを作った場合には、strData.link("http://…　…")のようになっていますが、2重引用符リテラルもStringオブジェクトとして扱われるため、"SampleQuarta".link("http://…　…")のように利用することもできます。また、複数の装飾指定をする場合はstrData.bold().italic() のように連続してメソッドを記述することができます。オブジェクトのプロトタイプの循環を使ったメソッドの利用になっていますが、細かい仕組みまでは理解する必要はないでしょう。


ハイパーリンク link

以下のように引数にハイパーリンクを指定することになっています。

  • strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9")


サンプルスクリプト 

strData1 = new String("java script リファレンス 目次");
document.write(strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9"), "</BR>");
strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9");
document.write(strData1, "</BR>");


表示結果:

フォント色 fontcolor

  • strData2.fontcolor("blue");
  • strData3.fontcolor("FA8072");//salmon サーモンピンク 16進数RGB指定


上記のように、引数で色名(X11 Colorで定義されているものが一般的でおよそ140種類。詳しくは本家wikipediaのX11の色名称説明に譲る)を指定したり、16進数RGB(000000～FFFFFF)で指定することができます。


サンプルスクリプト 

strData2 = new String("フォント色の指定(fontcolor) Navy 000080");
strData3 = new String("フォント色の指定(fontcolor) 191970 MidnightBlue");

document.write(strData2.fontcolor("Navy"), "</BR>");
document.write(strData3.fontcolor("191970"), "</BR>");


表示結果:

フォントサイズ fontsize

  • strData4.fontsize(1);//1～7の7段階。小 1 ⇔ 7 大

上記のように引数にフォントサイズを1～7の7段階で指定します。非常にあいまいなサイズ指定ですが、使っている人の基準に対して指定するような昔ながらのユーザフレンドリーな指定となっています。ほんとか？Webデザイナーはあまり使わないかもしれませんね。


サンプルスクリプト 

strData4 = new String("フォントサイズの指定(fontsize)");

for(i = 1;i < 8;i++){ 
    document.write(strData4.fontsize(i), i, "</BR></BR>");
}


表示結果:

大きくする big

  • strData5.big();


上記のように引数には何も指定できません。文字を大きくするというあいまいな指定です。ブラウジングしている人の基準のフォントサイズに対して、.big()と一段階だけ大きくするという指定から.big().big().big().big().big().big().big()のように多段階に大きくするという指定までできるわけです。表示結果がどうなるかは、閲覧している人のブラウザの設定次第ということになります。改行幅設定や画面サイズの問題もあって、表示がぐちゃぐちゃになるという可能性もあるユーザフレンドリーな手法です。どこが？


サンプルスクリプト 

strData5 = new String("フォントサイズを大きくする(big)");

document.write(strData5.big(), 1, "</BR></BR>");
document.write(strData5.big().big(), 2, "</BR></BR>");
document.write(strData5.big().big().big(), 3, "</BR></BR>");
document.write(strData5.big().big().big().big(), 4, "</BR></BR>");
document.write(strData5.big().big().big().big().big(), 5, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big(), 6, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big(), 7, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big(), 8, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big(), 9, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big().big(), 10, "</BR></BR>");
document.write("あ".big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big(), 20, "</BR></BR>");


表示結果:

小さくする small

  • strData6.small()


と、上記のように引数は設定できません。bigのときと同じように利用することができます。


サンプルスクリプト 

strData6 = new String("フォントサイズを小さくする(small)");

document.write(strData6.small(), 1, "</BR></BR>");
document.write(strData6.small().small(), 2, "</BR></BR>");
document.write(strData6.small().small().small(), 3, "</BR></BR>");
document.write(strData6.small().small().small().small(), 4, "</BR></BR>");
document.write(strData6.small().small().small().small().small(), 5, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small(), 6, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small(), 7, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small(), 8, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small(), 9, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small().small(), 10, "</BR></BR>");
document.write("C".small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small(), 20, "</BR></BR>");


表示結果:

点滅させる blink ※無効ブラウザばかりです。

  • strData7.blink()


上記のように引数は指定できません。文字列が点滅する装飾は近年、ブラウザでは対応されなくなっています。なんで？体に良くない人もいるという点とイライラする人が多いという装飾だからみたいです。文字が横に流れるマーキーというのも評判がイマイチでしたが復活の兆しです。こういうのがあったという歴史的知識とこういうのも使えるパターンがあるという知識になるでしょうか？


サンプルスクリプト 

strData7 = new String("文字の点滅_非対応ブラウザ多いです。(blink)");

document.write(strData7.blink(), "</BR>");


表示結果：

太くする bold

  • strData8.bold()


上記のように引数はありません。文字が太くなります。身体は…みんなそれぞれです。健康管理に気を付けましょう。それ、面白いと思って言ってんの？


サンプルスクリプト 

strData8 = new String("文字を太くする(bold)");

document.write(strData8.bold(), "</BR>");


表示結果：

固定幅フォント fixed

  • strData9.fixed();


上記のように引数はありません。固定幅フォントを適用します。このフォントはブラウザ側で固定幅フォントならこのフォントを使うと設定されています。でも固定幅のフォントできっと表示されているんだろうな。と、そういうことです。ユーザの思う。ユーザが好きなフォントで表示されているかもしれないし、ブラウザの設定のことなんて知らない人がほとんどで、デフォルトで設定されているアレなフォントで表示されていて不快になっているかもしれないと、いろいろ考え、推測することはできます。そういった想像力が大事です。自分なんかは、常に固定幅フォントが優先されるようにブラウザの設定をしているので、そういう人もいるってことです。フォントへのこだわりってのは人それぞれですね。心安らぐフォントは人それぞれ。特に指定されたフォントで表示されないとまずいってことが無い限りは、自分の好きなフォントで表示したい。そういうことです。ブラウザ用。コーディング用。作業用。いろいろ使い分けています。そういう人もいるということです。


サンプルスクリプト 

strData9 = new String("文字の固定幅フォント適用(fixed)");

document.write(strData9.fixed(), "</BR>");


表示結果：

斜体文字 italics

  • strData10.italics()


上記のように引数は設定できません。斜体文字になります。基本的には見ずらい形状になると考えていいと思いますが、一部英語フォントなんかではカッコよくなるやつもあります。センスが必要です。基本的に日本語が斜めになった場合は、目立つ以外の利点はないとおもっていますが、考え方はひとそれぞれでしょう。斜体が好きな人もいるかもしれません。自分は、たいてい嫌いですね。斜めにして読みにくくしたい！くらいの非常事態にしか使いたくないです。それか、分類のアイデアが枯渇して苦し紛れの装飾になったり、人から言われて、とか…ですね。ちなみに斜めにならないフォントを使っているブラウザ設定もあるので、その点まで考慮しておく必要はあるでしょう。


サンプルスクリプト 

strData10 = new String("文字の斜体化(italics)");

document.write(strData10.italics(), "</BR>");


表示結果：

取り消し線 strike

  • strData11.strike()


上記のように引数は設定できません。取り消し線が引かれます。文字のおおよそ中心あたりをとおるように線がひかれると思ってよいでしょう。どうしても、線の引かれる位置まで気にする場合は、別の方法を考えなければなりません。


サンプルスクリプト 

strData11 = new String("文字の取り消し線(strike)");

document.write(strData11.strike(), "</BR>");


表示結果：

下付き文字 sub

  • strData12.sub()


上記のように引数は設定できません。下付きの小さい文字になります。自分だったら文章の感情を表現する程度で使うかもしれませんが、面倒なのであまり使いませんね。


サンプルスクリプト 

strData12 = new String("文字の下付き(sub)");

document.write(strData12,strData12.sub(), "</BR>");


表示結果：

上付き文字 sup

  • strData12.sup()


上記のように引数は設定できません。上付きの小さい文字になります。引用とか注釈とか累乗とかの表現で使いますでしょうか。


サンプルスクリプト 

strData13 = new String("文字の上付き(sup)");

document.write(strData13,strData13.sup(), "</BR>");


表示結果：


文字列長さ(文字列変数長さ探索) length

  • nLengthValue = strData14.length

上記のように記述すると文字列の長さを取得できます。全角文字でも1文字だし、半角文字でも1文字です。混在していても、全角文字半角文字を個別にカウントして、その長さを返してくれます。


サンプルスクリプト 

strData14 = new String("文字数をcountできる .length");

document.write(strData14, " ,文字数 = ", strData14.length, "</BR>");


表示結果：

文字コード変換(1文字→ISO Latin-1コード) charCodeAt

文字は文字コード表との対応によって1バイト文字なら8桁の2進数で表せる256文字(0番～255番)が表現できるように構成されていて、ISO/IEC 8859-1(俗にLatin-1と呼ばれているモノ)という国際標準文字コードでの対応表に基づいて変換を行うことができるメソッドです。ちなみにISO/IEC 8859-1とISO 8859-1とは同じ意味ですが、ISO 8859-1とISO-8859-1とWindows-1252とは別モノの文字コード体系を指します。


  • "@akairo_no_sora".charCodeAt(0)


上記のように、引数は一つ設定できます。


  • 第一引数:このメソッドの元の文字列に対して、ISO Latin-1に変換したい文字のポジション。ポジション先頭番号は0。


サンプルスクリプト 

strData15 = new String("@akairo_no_sora");

document.write(strData15, " ,文字コード変換 ->");
for(n = 0;n < strData15.length;n++){ 
    document.write(strData15.charCodeAt(n).toString(16), ", ");
}
document.write("</BR>");


表示結果：


上記のようにfor文による繰り返し処理で、文字列すべてのコード変換ができます。aに相当する2番目、4番目そして、最後の文字のコード番号が一緒になっていることが確認できると思います。.toString(16)は文字列をn進数に変換するメソッドで、この場合nに16を割り当てているため、16進数に変換される仕組みです。

文字コード変換(ISO Latin-1コード→文字列) fromCharCode

前の項目で実施したこととは逆のことをしようとするものです。複数の文字コードから文字列を生成することもできます。C++言語で言うところの静的メンバ関数のような使い方で、Stringオブジェクトそのものにぶらさがっている関数を呼び出して処理するような操作です。Stringオブジェクトの形をしたオブジェクト変数としての文字列を使わないし、独立した作業だからです。引数で文字コード値を示し、それを文字列化するというものです。以下のように利用します。


  • strData16 = String.fromCharCode(parseInt("0x40"), parseInt("0x61"), parseInt("0x6b"), parseInt("0x61"), parseInt("0x69"), parseInt("0x72"), parseInt("0x6f"), parseInt("0x5f"), parseInt("0x6e"), parseInt("0x6f"), parseInt("0x5f"), parseInt("0x73"), parseInt("0x6f"), parseInt("0x72"), parseInt("0x61"))


上記のように、引数は複数をほぼ無限に設定できます。


  • 第一引数:ISO Latin-1コードで文字列にしたいコード番号をカンマ区切りで記述。16進数を使いたい場合はparseInt("0x**",16)、8進数を使いたい場合は、parseInt("0****",8)、2進数の場合は、parseInt("********",2)という具合にします。基数記法が0xでは始まる16進数と0で始まる8進数の場合はparseIntの第二引数は省略できる場合があります。


サンプルスクリプト 

strData15 = new String();

strData15 = String.fromCharCode(parseInt("0x40"), parseInt("0x61"), parseInt("0x6b"), parseInt("0x61"), parseInt("0x69"), parseInt("0x72"), parseInt("0x6f"), parseInt("0x5f"), parseInt("0x6e"), parseInt("0x6f"), parseInt("0x5f"), parseInt("0x73"), parseInt("0x6f"), parseInt("0x72"), parseInt("0x61"));

document.write(strData15, "</BR>");


表示結果：

大文字小文字変換 toLowerCase

アルファベット文字限定ですが、大文字を小文字に変換ができるメソッドです。以下のようにすると、オブジェクトが保持している文字列を小文字にしたものを取得できます。ただし、オブジェクトが保持しているそのものの文字列が小文字になるわけではありません。日本語のカタカナやひらがなの小文字には影響がありません。


  • strData16 = strData15.toLowerCase()


サンプルスクリプト 

strData15 = new String("小文字に変換(CONVERT)");

document.write(".toLowerCase() : ",strData15, " ,変換後 = ", strData15.toLowerCase(), "</BR>");


表示結果：

小文字大文字変換 toUpperCase

こちらもアルファベット文字限定ですが、小文字を大文字に変換ができるメソッドです。以下のようにすると、オブジェクトが保持している文字列を小文字にしたものを取得できます。細かいところも前の項目と動作が同じです。


  • strData17 = strData16.toUpperCase()


サンプルスクリプト 

strData16 = new String("大文字に変換(convert)");

document.write(".toUpperCase() : ",strData16, " ,変換後 = ", strData16.toUpperCase(), "</BR>");


表示結果：

文字列検索(表示コンテンツ内検索) find

これは凄い検索かも！表示コンテンツ内を検索する命令なんて、あまり聞いたことがない！けど、何に使うん？って思いがちですが、掲示板なんかで、記事検索システムを簡単に提供する場合なんかには便利かもしれません。今表示されている内容に対してなので、簡易的な検索に使うのかもしれません。縦に長い文書のシステムやらで検索してもらうのに便利かな？この文書の最初の方に麻薬というキーワードを使っていますので、そういうのも以下のようにして検索できます。IEではスクリプトエラーになりますので、むしろ動作するブラウザに絞って動くようにした方がよいかもしれません。Chromeでは動作します。なので、まだ解説してもいない方法を使ったサンプルを作ります。ここではfindって、こうやって使うんだとか、そういうことを知ってもらえればと思います。Chromeブラウザを使っている人は、あ、動かすとこうなるんだとか、そこまで確認してもらえます。検索した文字がハイライトされます。ちな、Stringオブジェクトとは、関係のない文字列検索です。このページで埋め込もうと思ったのですが、複雑なスクリプトはwikiシステムによる制限により組み込めないため別のページでサンプル動作を確かめてください。


  • bFindResult = find("麻薬",true,true)


  • 第一引数:検索文字列
  • 第二引数:true か false
true:大文字小文字区別
false:大文字小文字区別無し
  • 第三引数:
true:上方向検索(最後尾→先頭)
false:下方向検索(先頭→最後尾)



サンプルスクリプト 

<HTML>
<HEAD>
<TITLE>JavaScript Array</TITLE>
</HEAD>
<BODY>
JavaScript Array<BR />
<BR />
java scriptは楽しい。まるで麻薬のようだ。<BR />
あなたが落としたのは、<BR />
このjava scriptか？<BR />
それとも<BR />
このvb scriptか？<BR />
<BR />
よろしい。正直者のあなたには、<BR />
このperl scriptを差し上げよう。<BR />
<BR />
<BR />
全部、同じようなscript！<BR />
<BR />
<BR />
java scriptは楽しい。まるで麻薬のようだ。<BR />
<BR />
find検索サンプル:<BR />
<FORM NAME="find_sample_form">
<INPUT TYPE="text" VALUE="麻薬" NAME="findword" ><BR />
<INPUT TYPE="button" VALUE="find検索" onClick="funcFind()"><BR />
</FORM>
<SCRIPT Language="JavaScript">
<!--
var getBrowser = function(){
    var ua = window.navigator.userAgent.toLowerCase();
    var ver = window.navigator.appVersion.toLowerCase();
    var name = '';

    if (ua.indexOf("msie") >= 0 || ua.indexOf('trident/7') >= 0){
        if (ver.indexOf("msie 6.") >= 0){
            name = 'msie6';
        }
        else if (ver.indexOf("msie 7.") >= 0){
            name = 'msie7';
        }
        else if (ver.indexOf("msie 8.") >= 0){
            name = 'msie8';
        }
        else if (ver.indexOf("msie 9.") >= 0){
            name = 'msie9';
        }
        else if (ver.indexOf("msie 10.") >= 0){
            name = 'msie10';
        }
        else if(ua.indexOf('trident/7') >= 0){
            name = 'msie11';
        }else{
            name = 'ie6 以前 or ie11より後のversion';
        }
    }
    else if (ua.indexOf('chrome') >= 0){
        name = 'chrome';
    }
    else if (ua.indexOf('safari') >= 0){
        name = 'safari';
    }
    else if (ua.indexOf('opera') >= 0){
        name = 'opera';
    }
    else if (ua.indexOf('firefox') >= 0){
        name = 'firefox';
    }
    return name;
};

function funcFind()
{
    if(getBrowser().indexOf("ie") >= 0){
        alert("IEではfind関数は動作しません。このサンプルはchromeブラウザでのみ動作確認できます。");
    }
    else if(getBrowser().indexOf("chrome") >= 0){
        find(document.find_sample_form.findword.value);
    }
    else{
        alert("chromeブラウザ以外ではfind関数の動作を確認できていません。このサンプルはchromeブラウザでのみ動作確認できます。");
    }
}
-->
</SCRIPT>
</BODY>
</HTML>


実質、69行目だけがfind関数を使っているところです。


表示結果：

サンプル実行結果

文字列検索(文字列変数先頭検索) indexOf

  • nPosition = strData17.indexOf("麻薬",0)


上記のようにして利用します。


  • 第一引数:検索文字列
  • 第二引数:検索開始位置 0なら先頭。※省略も可能(省略時は0が適用)


サンプルスクリプト 

strData17 = new String("文字列検索(indexOf)");

document.write(".indexOf() : ",strData17, " ,検索位置 = ", strData17.indexOf("index",0), "</BR>");


表示結果：

文字列検索(文字列変数後方検索) lastIndexOf

  • nPosition = strData17.lastIndexOf("麻薬", strData18.length - 1)


上記のようにして利用します。


  • 第一引数:検索文字列
  • 第二引数:検索開始位置 0なら先頭。※省略も可能(省略時は最後尾が適用, xxx.length - 1と同じことです)


サンプルスクリプト 

strData18 = new String("文字列検索(lastIndexOf)-last");

document.write(".indexOf() : ",strData18, " ,検索位置 = ", strData18.lastIndexOf("last", strData18.length - 1), "</BR>");


表示結果：

文字列正規表現検索(返却値が一致文字列) match

正規表現とは？本家Wikipediaの正規表現の記事に詳細な解説は譲りたいですが、要するところに高度な検索手法と思えばよいと思います。更にWikipediaの解説をかいつまむと、数学者によって開発されたパターマッチモデルをテキスト検索向けとしてトンプソンという人が検索機能を開発して、UNIXのエディタや特定のプログラミング言語にとりこまれ、JAVA Scriptにも適用され、JAVA Scriptを標準化するECMA Scriptにおいても、正規表現検索が整備されたという流れになっています。パターンマッチングの解説については、正規表現 JAVA Script用の記事に記述します。

  • strResult = strData19.match(/regular expression/)


上記のようにして利用します。


  • 第一引数:正規表現パターンマッチ検索文字列


サンプルスクリプト 

strData19 = new String("正規表現文字列検索(regular expression)");

document.write(".match() : ",strData19, " ,検索結果 = ", strData19.match(/regular expression/), "</BR>");


表示結果：

文字列正規表現検索(返却値が文字位置) search

先の項目では、正規表現検索で一致する文字があるか探索し、一致した場合には、その一致した文字列を返却するメソッドとなっていましたが、このsearchメソッドでは、一致した文字の位置を数値で返却するメソッドになっています。パターンマッチングの解説については、正規表現 JAVA Script用の記事を参照して下さい。


  • nPosition = strData20.search(/regular expression/)


上記のようにして利用します。


  • 第一引数:正規表現パターンマッチ検索文字列


サンプルスクリプト 

strData20 = new String("正規表現文字列検索(regular expression)");

document.write(".search() : ",strData20, " ,検索結果 = ", strData20.search(/regular expression/), "</BR>");


表示結果：

文字列正規表現置換(返却値は置換後文字列) replace

正規表現検索で一致する文字があるか探索し、一致した場合には、その一致した文字列を変換文字列で置換した文字列を返却するメソッドとなっています、パターンマッチングの解説については、正規表現 JAVA Script用の記事を参照して下さい。


  • strData = strData21.replace(/regular expression/,"Regular Expression")


上記のようにして利用します。


  • 第一引数:正規表現パターンマッチ検索文字列
  • 第二引数:置換文字列


サンプルスクリプト 

strData21 = new String("正規表現文字列検索(regular expression)");

document.write(".replace() : ",strData21, " ,検索結果 = ", strData21.replace(/regular expression/,"Regular Expression"), "</BR>");


表示結果：

文字列位置による抽出(返却値は抽出文字) charAt

文字列オブジェクトに対して、charAtメソッドの引数に取り出したい文字のポジションを指定すると、その一文字が取得できます。

  • strData = strData22.charAt(1)


  • 第一引数:取り出したい文字の位置番号


サンプルスクリプト 

strData22 = new String("文字列位置による抽出(charAt)");

document.write(".charAt() : ",strData22, " ,検索結果 = ", strData22.charAt(2), "</BR>");


表示結果：

文字列位置区間(後方位置指定可能)による抽出(返却値は抽出文字列) slice

文字列オブジェクトに対して、sliceメソッドの引数に取り出したい文字の開始終了ポジションを指定すると、その抽出文字列が取得できます。

  • strData = strData23.slice(8,10)


  • 第一引数:取り出したい文字の開始位置番号
  • 第二引数:取り出したい文字の終了位置番号、指定した文字位置は含まれないので、実際には抜き出し終了文字の次の文字位置を指定します。不数を指定すると末尾からの文字位置番号を指定できます。


サンプルスクリプト 

strData23 = new String("文字列位置による抽出(slice)");

document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,10), "</BR>");
document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,-1), "</BR>");


表示結果：

文字列位置区間による抽出(返却値は抽出文字列) substring

文字列オブジェクトに対して、substringメソッドの引数に取り出したい文字の開始終了ポジションを指定すると、その抽出文字列が取得できます。

  • strData = strData23.substring(8,10)


  • 第一引数:取り出したい文字の開始位置番号
  • 第二引数:取り出したい文字の終了位置番号、指定した文字位置は含まれないので、実際には抜き出し終了文字の次の文字位置を指定します。


サンプルスクリプト 

strData24 = new String("文字列位置による抽出(substring)");

document.write(".substring() : ",strData24, " ,検索結果 = ", strData24.substring(8,10), "</BR>");


表示結果：

文字列位置と文字数による抽出(返却値は抽出文字列) substr

文字列オブジェクトに対して、subメソッドの引数に取り出したい文字の開始ポジションとその文字数を指定すると、その抽出文字列が取得できます。

  • strData = strData25.substr(3,7)


  • 第一引数:取り出したい文字の開始位置番号
  • 第二引数:取り出したい文字数。


サンプルスクリプト 

strData25 = new String("文字列位置による抽出(substr)");

document.write(".substring() : ",strData25, " ,検索結果 = ", strData25.substr(3,7), "</BR>");


表示結果：

文字列中の文字による分割(返却値は文字列配列) split

文字列オブジェクトに対して、splitメソッドの引数に分割したい文字Token(トークン：つまりは分割の記号とか文字列)を指定すると、その分割文字で分割した文字列が配列の要素となって取得できます。

  • strData = strData26.split("-_-",3)


  • 第一引数:分割のトークンにしたい文字列
  • 第二引数:取り出したい配列数(上限)。


サンプルスクリプト 

strData26 = new String("文字列位置による抽出(split)-_-文字列1-_-文字列2-_-文字列3");

document.write(".split() : ",strData26, " ,検索結果 = ", strData26.split("-_-",3), "</BR>");


表示結果：

JAVA Script#リファレンスに戻る。

「https://wiki.yo-net.jp/index.php?title=JavaScript_文字列操作&oldid=1667」から取得