2024年06月14日

javascript:replace()


このメソッドの説明

replace() はJavaScriptメソッドです。

文字列を[正規表現]または[文字列]でサーチし、指定文字に[置換]します。

 


メソッド

String.replaceSearchValue , ReplaseValue )

 


パラメータ

SearchValue(文字列 | 正規表現)(必須)

サーチする「文字」または「正規表現」を指定します。

 

ReplaseValue(文字列))(必須)

置き換える文字列

 


返り値

見つかった場合:リプレースした文字列が返ります。

見つからない場合:元の文字列のままです。

 


利用例

①文字列でサーチして、指定文字列に置き換える

var data = 'abc.item.def' ;
var after_data = data.replace( 'item' , 'php' );
console.log(after_data);

■結果は下記になります

abc.php.def

 

②正規表現でサーチして、指定文字列に置き換える

var data = 'abc.item.def';
var after_data = data.replace( /item/ , 'php' );
console.log(after_data);

■結果は①と同様です。

 

③入力データから空白を削除する

下記は入力データから「半角スペース」、「タブ」、「改行」、「改ページ」に加え「全角スペース」も取り除く事例です。

var input_data = " 6,\n12 ,  13"; //全角スペースを含む色々な空白文字が入っています
var after_data = input_data.replace(/[\s ]+/g , '' );
console.log(after_data);

\s は、空白文字を表します

[]+ は、複数の空白文字にも対応させるコマンドです

/ /g は、1個処理したら終了ではなく、何回も繰り返えして総てを処理させるコマンドです。

結果は下記になります。

6,12,13

 

④商品コード等をクラス名で使える文字列に変換する

var item_code = 'abc(123)-[ABC]_{山田さん]' ;
var search_code = /[ -,.\/:-@\[-^`{-~]/g ;
var after_code = item_code.replace( search_code , '_' );
console.log( item_code );
console.log( after_code );

一般的なクラス名やID名は、あらかじめ決めた命名ルールで記述するのが原則です。

しかし商品コードをクラス名に利用して、商品表示のON/OFFを制御したいケースがあります。

このような場合は商品コードをクラス名で利用できるコードに変更します。

上記の例では ()[]{} はクラス名には利用できません。そこで、これらを _ に変更しています。

結果は「abc_123_-_ABC___山田さん_」にリプレースされます。

 


関連情報

・文字列を正規表現で操作する他のメソッドは正規表現メソッドを参照してください。

 


関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()