01 | 2017/03 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

jQueryに学ぶ Javascript の基礎(8) String.replace() メソッド──jQuery解読(46)

string.replace(/・・・/,function(hit,b1,b2,・・・){}) メソッド

string.replace() は比較馴染みやすい、また分かりやすいメソッドです。何故ならば「置換」は、ワードやエクセル等のメジャーアプリケーションは元より、エディターでも必須機能ですし、言葉の意味からも機能が類推しやすいからです。

事実、多くのサイトで string.replace( beforeString, afterString ) のように引数付きで紹介され、例題の多くも 引数は置換前文字列、置換語文字列の2 つの「定数文字列」として説明されています。

しかし、第 2 引数に関数を取る場合に触れたサイトは限られています。ところが、その機能を知ってみると関数による置換は極めて有用で便利です。どうしてもっと紹介されないのだろうか、と訝しく思います。置換前文字列内の部分文字列を、置換後文字列に部分的に利用することは決して少なくないからです。

jquery.js での使われ方

この関数を第 2 引数とする replace() メソッドは、jQuery.curCSS() クラスメソッドに登場します。#1056-1057 の

 1056: name = name.replace(/-([a-z])/ig, function(all, letter){
 1057:   return letter.toUpperCase();
 1058: });

です。このエントリイでは第 2 引数に関数を取る replace メソッドについて学習します。

参考サイトで調べる

この件で全面的に参考になる Web Pages は MDC(Mozilla Developer Center)にありました。こちら【 replace - MDC 】には、第 2 引数が関数の場合の例題があり、またこのメソッドの詳細な解説も掲載されています。(残念ながら英語版です。)

それでも「例題」というものの神通力はたいしたもので、例題を見て本質は十分理解できます。以下がその例題です。

function replacer(str, p1, p2, offset, s){
  return str + " - " + p1 + " , " + p2;
}
"XXzzzz".replace(/(X*)(z*)/, replacer); // returns:XXzzzz - XX , zzzz
ここに

置換の対象となる文字列:"XXzzzz"

置換対象文字列:/(X*)(z*)/

一致文字列:str

置換後文字列:str + " - " + p1 + " , " + p2(つまり return 値)

改めて jquery.js での使われ方を調査

#1056-1057 の以下のコードを改めて見てみると

 1056: name = name.replace(/-([a-z])/ig, function(all, letter){
 1057:   return letter.toUpperCase();
 1058: });

これは、"abc-def" を "abcDef" に置換する、所謂駱駝文字列作成コードです。

置換対象はハイフンに続く一文字のアルファベットであり、letter は部分文字列である [a-z] (任意の小文字アルファベット)を指しますから、letter.toUpperCase() によって "-" とその直後にある小文字の任意のアルファベット 1 文字、合計 2 文字が 1 文字の大文字に変わります。

ここに、学習のために上のコードを一寸拡張し、name 文字列に複数のハイフンのある文字列を与えてみて挙動をフォローしてみます。

var str ="abc-defghi-jkl-mnop"
str = str.replace(/-([a-z])/ig, function(hit, letter, offset, orStr){
    return " , hit : "+ hit + " , letter.toUpperCase() : " + letter.toUpperCase() +
     " , offset : " + offset + " , orStr : " + orStr + "\n";
});

以上のコードを走らせると置換後の str は以下のようになります。

str == "
abc , hit : -d , letter.toUpperCase() : D , offset : 3 , orStr : abc-defghi-jkl-mn
efghi , hit : -j , letter.toUpperCase() : J , offset : 10 , orStr : abc-defghi-jkl-mn
kl , hit : -m , letter.toUpperCase() : M , offset : 14 , orStr : abc-defghi-jkl-mn
nop"
  • 各行行頭の文字列は置換対象外の文字列です。具体的には abc、efghi、kl 及び nop です。
  • 続く hit : -d 等は正規表現 /-[a-z]/ にヒットした置換対象文字列 -d とその説明文字列です。
  • 次の letter.toUpperCase() : D 等が置換後文字で、コロンの前が説明、後が置換後の文字です。
  • offset : 3 等は対象文字列の先頭からのヒット位置の説明とヒット位置です。最初の「-」は3番目にあります。(最初の文字は 0 )
  • orStr : abc-defghi-jkl-mn は対象文字列全体を意味しています。orStr が説明で、コロンに続く文字列は、置換対象となった文字列全体、すなわち上の場合には置換前の str です。

このように僅かな文字列に対しても、replace メソッドは多くの情報をもたらします。正規表現による部分文字列指定がこうした複雑な情報取得を可能にしています。

自作例題を作ってみる

上の例題を踏まえて以下のような例題を作ってみました。

var str="I love you.";
var ret = str.replace( /^(i)(.+)(you).*$/i, function(all,p1,p2,p3){
 return p3.charAt(0).toUpperCase() + p3.substring(1) +" must" + p2 + "me !"} );
// この結果 ret=="You must love me !" となる。

柔軟に置換結果を得られることが分かりました。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/699-8602f757

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200903170136