JavaScript 文字列操作 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎文字列検索(表示コンテンツ内検索) find)
(→‎文字列中の文字による分割(返却値は文字列配列) split)
 
537行: 537行:
  
 
== '''文字列検索(表示コンテンツ内検索) find ''' ==
 
== '''文字列検索(表示コンテンツ内検索) find ''' ==
−
これは凄い検索かも！表示コンテンツ内を検索する命令なんて、あまり聞いたことがない！けど、何に使うん？って思いがちですが、掲示板なんかで、記事検索システムを簡単に提供する場合なんかには便利かもしれません。今表示されている内容に対してなので、簡易的な検索に使うのかもしれません。縦に長い文書のシステムやらで検索してもらうのに便利かな？この文書の最初の方に麻薬というキーワードを使っていますので、そういうのも以下のようにして検索できます。IEではスクリプトエラーになりますので、むしろ動作するブラウザに絞って動くようにした方がよいかもしれません。Chromeでは動作します。なので、まだ解説してもいない方法を使ったサンプルを作ります。ここではfindって、こうやって使うんだとか、そういうことを知ってもらえればと思います。Chromeブラウザを使っている人は、あ、動かすとこうなるんだとか、そこまで確認してもらえます。検索した文字がハイライトされます。ちな、Stringオブジェクトとは、関係のない文字列検索です。
+
これは凄い検索かも！表示コンテンツ内を検索する命令なんて、あまり聞いたことがない！けど、何に使うん？って思いがちですが、掲示板なんかで、記事検索システムを簡単に提供する場合なんかには便利かもしれません。今表示されている内容に対してなので、簡易的な検索に使うのかもしれません。縦に長い文書のシステムやらで検索してもらうのに便利かな？この文書の最初の方に麻薬というキーワードを使っていますので、そういうのも以下のようにして検索できます。IEではスクリプトエラーになりますので、むしろ動作するブラウザに絞って動くようにした方がよいかもしれません。Chromeでは動作します。なので、まだ解説してもいない方法を使ったサンプルを作ります。ここではfindって、こうやって使うんだとか、そういうことを知ってもらえればと思います。Chromeブラウザを使っている人は、あ、動かすとこうなるんだとか、そこまで確認してもらえます。検索した文字がハイライトされます。ちな、Stringオブジェクトとは、関係のない文字列検索です。このページで埋め込もうと思ったのですが、複雑なスクリプトはwikiシステムによる制限により組み込めないため別のページでサンプル動作を確かめてください。
 +
 
 +
 
 +
*bFindResult = find("麻薬",true,true)
 +
 
 +
 
 +
:*第一引数:検索文字列
 +
:*第二引数:true か false
 +
:::true:大文字小文字区別
 +
:::false:大文字小文字区別無し
 +
:*第三引数:
 +
:::true:上方向検索(最後尾→先頭)
 +
:::false:下方向検索(先頭→最後尾)
  
  
−
*bFindResult = find("麻薬")
 
  
  
 
サンプルスクリプト
 
サンプルスクリプト
 
<syntaxhighlight lang="javascript" line start="1">
 
<syntaxhighlight lang="javascript" line start="1">
 +
<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>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
 +
実質、69行目だけがfind関数を使っているところです。
  
  
 
表示結果：
 
表示結果：
  
−
<yjavascript>
+
[[Media:JavaScript String 02 find.html|サンプル実行結果]]
−
var version = function(){
+
−
    ua = window.navigator.userAgent.toLowerCase();
+
−
    return ua;
+
−
};
+
−
document.write("サンプルスクリプトはIEでは動作しません。", "</BR>", version(), "</BR>", window.navigator.appVersion.toLowerCase(), "</BR>", "</BR>");
+
  
 +
== '''文字列検索(文字列変数先頭検索) indexOf ''' ==
 +
*nPosition = strData17.indexOf("麻薬",0)
  
−
//bFindResult = find("麻薬");
 
−
//document.write("検索結果 = ", nData1, "</BR>");
 
  
 +
上記のようにして利用します。
  
−
</yjavascript>
 
  
−
== '''文字列検索(文字列変数先頭検索) IndexOf ''' ==
+
:*第一引数:検索文字列
 +
:*第二引数:検索開始位置 0なら先頭。※省略も可能(省略時は0が適用)
  
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData17 = new String("文字列検索(indexOf)");
 +
 +
document.write(".indexOf() : ",strData17, " ,検索位置 = ", strData17.indexOf("index",0), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData17 = new String("文字列検索(indexOf)");
 +
 +
document.write(".indexOf() : ",strData17, " ,検索位置 = ", strData17.indexOf("index",0), "</BR>");
 +
</yjavascript>
  
 
== '''文字列検索(文字列変数後方検索) lastIndexOf ''' ==
 
== '''文字列検索(文字列変数後方検索) lastIndexOf ''' ==
 +
*nPosition = strData17.lastIndexOf("麻薬", strData18.length - 1)
  
 +
 +
上記のようにして利用します。
 +
 +
 +
:*第一引数:検索文字列
 +
:*第二引数:検索開始位置 0なら先頭。※省略も可能(省略時は最後尾が適用, xxx.length - 1と同じことです)
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData18 = new String("文字列検索(lastIndexOf)-last");
 +
 +
document.write(".indexOf() : ",strData18, " ,検索位置 = ", strData18.lastIndexOf("last", strData18.length - 1), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData18 = new String("文字列検索(lastIndexOf)-last");
 +
 +
document.write(".lastIndexOf() : ",strData18, " ,検索位置 = ", strData18.lastIndexOf("last"), "</BR>");
 +
</yjavascript>
  
 
== '''文字列正規表現検索(返却値が一致文字列) match ''' ==
 
== '''文字列正規表現検索(返却値が一致文字列) match ''' ==
 +
正規表現とは？[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE 本家Wikipediaの正規表現の記事]に詳細な解説は譲りたいですが、要するところに高度な検索手法と思えばよいと思います。更にWikipediaの解説をかいつまむと、数学者によって開発されたパターマッチモデルをテキスト検索向けとしてトンプソンという人が検索機能を開発して、UNIXのエディタや特定のプログラミング言語にとりこまれ、JAVA Scriptにも適用され、JAVA Scriptを標準化するECMA Scriptにおいても、正規表現検索が整備されたという流れになっています。パターンマッチングの解説については、[[正規表現 JAVA Script|正規表現 JAVA Script用の記事]]に記述します。
  
 +
*strResult = strData19.match(/regular expression/)
 +
 +
 +
上記のようにして利用します。
 +
 +
 +
:*第一引数:正規表現パターンマッチ検索文字列
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData19 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".match() : ",strData19, " ,検索結果 = ", strData19.match(/regular expression/), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData19 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".match() : ",strData19, " ,検索結果 = ", strData19.match(/regular expression/), "</BR>");
 +
</yjavascript>
  
 
== '''文字列正規表現検索(返却値が文字位置) search ''' ==
 
== '''文字列正規表現検索(返却値が文字位置) search ''' ==
 +
先の項目では、正規表現検索で一致する文字があるか探索し、一致した場合には、その一致した文字列を返却するメソッドとなっていましたが、このsearchメソッドでは、一致した文字の位置を数値で返却するメソッドになっています。パターンマッチングの解説については、[[正規表現 JAVA Script|正規表現 JAVA Script用の記事]]を参照して下さい。
  
 +
 +
*nPosition = strData20.search(/regular expression/)
 +
 +
 +
上記のようにして利用します。
 +
 +
 +
:*第一引数:正規表現パターンマッチ検索文字列
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData20 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".search() : ",strData20, " ,検索結果 = ", strData20.search(/regular expression/), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData20 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".search() : ",strData20, " ,検索結果 = ", strData20.search(/regular expression/), "</BR>");
 +
</yjavascript>
  
 
== '''文字列正規表現置換(返却値は置換後文字列) replace ''' ==
 
== '''文字列正規表現置換(返却値は置換後文字列) replace ''' ==
 +
正規表現検索で一致する文字があるか探索し、一致した場合には、その一致した文字列を変換文字列で置換した文字列を返却するメソッドとなっています、パターンマッチングの解説については、[[正規表現 JAVA Script|正規表現 JAVA Script用の記事]]を参照して下さい。
  
 +
 +
*strData = strData21.replace(/regular expression/,"Regular Expression")
 +
 +
 +
上記のようにして利用します。
 +
 +
 +
:*第一引数:正規表現パターンマッチ検索文字列
 +
:*第二引数:置換文字列
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData21 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".replace() : ",strData21, " ,検索結果 = ", strData21.replace(/regular expression/,"Regular Expression"), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData21 = new String("正規表現文字列検索(regular expression)");
 +
 +
document.write(".replace() : ",strData21, " ,検索結果 = ", strData21.replace(/regular expression/,"Regular Expression"), "</BR>");
 +
</yjavascript>
  
 
== '''文字列位置による抽出(返却値は抽出文字) charAt ''' ==
 
== '''文字列位置による抽出(返却値は抽出文字) charAt ''' ==
 +
文字列オブジェクトに対して、charAtメソッドの引数に取り出したい文字のポジションを指定すると、その一文字が取得できます。
  
 +
*strData = strData22.charAt(1)
 +
 +
 +
:*第一引数:取り出したい文字の位置番号
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData22 = new String("文字列位置による抽出(charAt)");
 +
 +
document.write(".charAt() : ",strData22, " ,検索結果 = ", strData22.charAt(2), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData22 = new String("文字列位置による抽出(charAt)");
 +
 +
document.write(".charAt() : ",strData22, " ,検索結果 = ", strData22.charAt(2), "</BR>");
 +
</yjavascript>
  
 
== '''文字列位置区間(後方位置指定可能)による抽出(返却値は抽出文字列) slice ''' ==
 
== '''文字列位置区間(後方位置指定可能)による抽出(返却値は抽出文字列) slice ''' ==
 +
文字列オブジェクトに対して、sliceメソッドの引数に取り出したい文字の開始終了ポジションを指定すると、その抽出文字列が取得できます。
  
 +
*strData = strData23.slice(8,10)
 +
 +
 +
:*第一引数:取り出したい文字の開始位置番号
 +
:*第二引数:取り出したい文字の終了位置番号、指定した文字位置は含まれないので、実際には抜き出し終了文字の次の文字位置を指定します。不数を指定すると末尾からの文字位置番号を指定できます。
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData23 = new String("文字列位置による抽出(slice)");
 +
 +
document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,10), "</BR>");
 +
document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,-1), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData23 = new String("文字列位置による抽出(slice)");
 +
 +
document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,10), "</BR>");
 +
document.write(".slice() : ",strData23, " ,検索結果 = ", strData23.slice(8,-1), "</BR>");
 +
</yjavascript>
  
 
== '''文字列位置区間による抽出(返却値は抽出文字列) substring ''' ==
 
== '''文字列位置区間による抽出(返却値は抽出文字列) substring ''' ==
 +
文字列オブジェクトに対して、substringメソッドの引数に取り出したい文字の開始終了ポジションを指定すると、その抽出文字列が取得できます。
  
 +
*strData = strData23.substring(8,10)
 +
 +
 +
:*第一引数:取り出したい文字の開始位置番号
 +
:*第二引数:取り出したい文字の終了位置番号、指定した文字位置は含まれないので、実際には抜き出し終了文字の次の文字位置を指定します。
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData24 = new String("文字列位置による抽出(substring)");
 +
 +
document.write(".substring() : ",strData24, " ,検索結果 = ", strData24.substring(8,10), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData24 = new String("文字列位置による抽出(substring)");
 +
 +
document.write(".substring() : ",strData24, " ,検索結果 = ", strData24.substring(8,10), "</BR>");
 +
</yjavascript>
  
 
== '''文字列位置と文字数による抽出(返却値は抽出文字列) substr ''' ==
 
== '''文字列位置と文字数による抽出(返却値は抽出文字列) substr ''' ==
 +
文字列オブジェクトに対して、subメソッドの引数に取り出したい文字の開始ポジションとその文字数を指定すると、その抽出文字列が取得できます。
  
 +
*strData = strData25.substr(3,7)
 +
 +
 +
:*第一引数:取り出したい文字の開始位置番号
 +
:*第二引数:取り出したい文字数。
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData25 = new String("文字列位置による抽出(substr)");
 +
 +
document.write(".substring() : ",strData25, " ,検索結果 = ", strData25.substr(3,7), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData25 = new String("文字列位置による抽出(substr)");
 +
 +
document.write(".substring() : ",strData25, " ,検索結果 = ", strData25.substr(3,7), "</BR>");
 +
</yjavascript>
  
 
== '''文字列中の文字による分割(返却値は文字列配列) split ''' ==
 
== '''文字列中の文字による分割(返却値は文字列配列) split ''' ==
 +
文字列オブジェクトに対して、splitメソッドの引数に分割したい文字Token(トークン：つまりは分割の記号とか文字列)を指定すると、その分割文字で分割した文字列が配列の要素となって取得できます。
 +
 +
*strData = strData26.split("-_-",3)
 +
 +
 +
:*第一引数:分割のトークンにしたい文字列
 +
:*第二引数:取り出したい配列数(上限)。
 +
 +
 +
サンプルスクリプト
 +
<syntaxhighlight lang="javascript" line start="1">
 +
strData26 = new String("文字列位置による抽出(split)-_-文字列1-_-文字列2-_-文字列3");
 +
 +
document.write(".split() : ",strData26, " ,検索結果 = ", strData26.split("-_-",3), "</BR>");
 +
</syntaxhighlight>
 +
 +
 +
表示結果：
 +
 +
<yjavascript>
 +
strData26 = new String("文字列位置による抽出(split)-_-文字列1-_-文字列2-_-文字列3");
 +
 +
document.write(".split() : ",strData26, " ,検索結果 = ", strData26.split("-_-",3), "</BR>");
 +
</yjavascript>
 +
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。

2016年7月28日 (木) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=JavaScript_%E6%96%87%E5%AD%97%E5%88%97%E6%93%8D%E4%BD%9C&oldid=4065」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス