replace()【置換 (正規表現可・関数指定可)】
split()【分割 (正規表現可)】
trim()【両端の空白削除】
trimStart()【先頭の空白削除】trimEnd()【末尾の空白削除】
trimLeft()【左端の空白削除】trimRight()【右端の空白削除】
padStart()【先頭パディング】padEnd()【末尾パディング】

String.prototype.replace()【置換 (正規表現可・関数指定可)】

メモ

  • 文字列の置換 (元の文字列は変更なし)
  • 外部リンク (英語)
    String.prototype.replace (searchValue, replaceValue )
    ES2016 (7) ES2015 (6) ES5.1

構文

string.replace( searchValue, replaceValue )

戻り値置換後の文字列
searchValue文字列 または RegExp【正規表現】オブジェクト (詳細は下記参照)
replaceValue置換文字列 または 置換用関数 (詳細は下記参照)
searchValue'g'(グローバル検索) フラグ処理
RegExp オブジェクト以外文字列変換し、初めに一致した文字列のみ置換
RegExp オブジェクト
(正規表現リテラル)
false初めにマッチした文字列のみ置換
true全てのマッチした文字列を置換
replaceValue (文字列):置換文字列 (以下の置換パターンも利用可能)
置換パターン説明
$$'$' 文字
$&マッチした部分文字列
$`マッチした部分文字列の直前の文字列
$'マッチした部分文字列の直後の文字列
$nn (1~9)番目のキャプチャ文字列
$nnnn (01~99)番目のキャプチャ文字列
$<キャプチャ名> 名前付きキャプチャ文字列
replaceValue (関数):置換用関数 ('g'【グローバル検索】フラグ使用の場合、一致回数分呼び出し)
引数名 (例)説明
matchedマッチした部分文字列
capture1~キャプチャ文字列 (キャプチャ数分:名前付きキャプチャを含む)
positionマッチ部分の開始位置
string置換元の全体文字列
namedCaptures 名前付きキャプチャの連想配列 (キャプチャ名・キャプチャ文字列)
戻り値型説明
文字列置換後の文字列

let str = "あい123あい123あい123";
console.log(str.replace("あい", "【置換】"));   // 出力:【置換】123あい123あい123
console.log(str.replace(/あい/, "【置換】"));   // 出力:【置換】123あい123あい123
console.log(str.replace(/あい/g, "【置換】"));  // 出力:【置換】123【置換】123【置換】123 (全て置換)
console.log(str.replace(123, "【置換】"));      // 出力:あい【置換】あい123あい123 (数字を文字列に変換後、置換)

str = "あいabcあいABCあいaBc";
console.log(str.replace(/abc/gi, "【置換】"));
// 出力:あい【置換】あい【置換】あい【置換】(大文字・小文字の区別なく全て置換)

str = "@あいう@かきく@"
console.log(str.replace(/@/g, "【置換:$$】"));
// 出力:【置換:$】あいう【置換:$】かきく【置換:$】
console.log(str.replace(/[ぁ-ん]+/g, "【マッチ部分:$&】"));
// 出力:@【マッチ部分:あいう】@【マッチ部分:かきく】@
console.log(str.replace(/@/g, "【前:$`】"));
// 出力:【前:】あいう【前:@あいう】かきく【前:@あいう@かきく】
console.log(str.replace(/@/g, "【後:$'】"));
// 出力:【後:あいう@かきく@】あいう【後:かきく@】かきく【後:】
console.log(str.replace(/([ぁ-ん])([ぁ-ん])([ぁ-ん])/g, "【入れ替え:$3$2$1】"));  // ひらがなの順番を入れ替え
// 出力:@【入れ替え:ういあ】@【入れ替え:くきか】@

str = "あいうabc-123かきくdef-456"
console.log(str.replace(/([a-z]+)-(\d+)/g, "【入れ替え:$02-$01】")); // アルファベット と 数値 を入れ替え
// 出力:あいう【入れ替え:123-abc】かきく【入れ替え:456-def】
/**
 * 置換用関数
 * @param  {string} matched  マッチした部分文字列
 * @param  {string} capture1 マッチ部分1
 * @param  {string} capture2 マッチ部分2
 * @param  {number} position マッチ部分の開始位置
 * @param  {string} string   置換前の全体文字列
 * @return {string}        置換後の文字列
 */
function funcReplace(matched, capture1, capture2, position, string) {
  console.log("funcReplace:", matched, capture1, capture2, position, string);
  const n1 = parseInt(capture1, 10);
  const n2 = parseInt(capture2, 10);
  const str = n1 + " たす " + n2 + " は " + (n1 + n2) + "\n";
  return str;
}

const str = "1+2=ans;12+34=ans;123+456=ans;";
console.log(str.replace(/(\d+)\+(\d+)=ans;/g, funcReplace));
// 出力:funcReplace: 1+2=ans; 1 2 0 1+2=ans;12+34=ans;123+456=ans;
// 出力:funcReplace: 12+34=ans; 12 34 8 1+2=ans;12+34=ans;123+456=ans;
// 出力:funcReplace: 123+456=ans; 123 456 18 1+2=ans;12+34=ans;123+456=ans;
// 出力:1 たす 2 は 3
// 出力:12 たす 34 は 46
// 出力:123 たす 456 は 579
console.log(str);
// 出力:1+2=ans;12+34=ans;123+456=ans;
// キャプチャ (文字列指定)
const str = "word1 word2 word3";
console.log(str.replace(/([a-z0-9]+) (?<w2>[a-z0-9]+) ([a-z0-9]+)/, "[$1] [$<w2>] [$03]"));
// キャプチャ (関数指定)
function funcGroup(matched, capture1, capture2, capture3, capture4, position, string, namedCaptures) {
  console.log(matched);   // 出力:word1 word2 word3 word4
  console.log(capture1);  // 出力:word1
  console.log(capture2);  // 出力:word2
  console.log(capture3);  // 出力:word3
  console.log(capture4);  // 出力:word4
  console.log(position);  // 出力:5
  console.log(string);    // 出力:WORD word1 word2 word3 word4 word5
  console.log(namedCaptures);  // 出力:{w2: "word2", w4: "word4"}
  const result = "[" + capture1 + "] [" + namedCaptures['w2'] + "] [" + capture3 + "] [" + namedCaptures['w4'] + "]";
  return result;
}

const str = "WORD word1 word2 word3 word4 word5";
console.log(str.replace(/([a-z0-9]+) (?<w2>[a-z0-9]+) ([a-z0-9]+) (?<w4>[a-z0-9]+)/, funcGroup));
// 出力:WORD [word1] [word2] [word3] [word4] word5

String.prototype.split()【分割 (正規表現可)】

メモ

  • 文字列を指定セパレータ(正規表現可)で分割 (元の文字列は変更なし)
    • 内部からRegExp[ @@split ] 【分割】を呼び出し
  • 外部リンク (英語)
    String.prototype.split ( separator, limit )
    ES2016 (7) ES2015 (6) ES5.1

構文

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

戻り値部分文字列の配列 (this が空文字列の場合、1つの空文字列を含んだ配列)
separatorセパレータ (文字列 または RegExp 【正規表現】オブジェクト (正規表現リテラル))
limit分割結果の配列数制限 (詳細は下記参照)
separator説明
省略this を文字列に変換した値を返却
空文字列1文字ずつの配列を返却
limit説明
省略232-1
253-1
0空の配列を返却

var str = ",あ,いう,,えお,";
console.log(str.split(",", 4));   // 出力:["", "あ", "いう", ""]
console.log(str.split(",", 999)); // 出力:["", "あ", "いう", "", "えお", ""]
console.log(str.split(","));      // 出力:["", "あ", "いう", "", "えお", ""]
console.log(str.split(",", 0));   // 出力:[]
console.log(str.split(""));       // 出力:[",", "あ", ",", "い", "う", ",", ",", "え", "お", ","]
console.log(str.split());         // 出力:[",あ,いう,,えお,"]

str = "";
console.log(str.split(","));      // 出力:[""]

str = "ab";
console.log(str.split(/a*?/));    // 出力:["a", "b"]
console.log(str.split(/a*/));     // 出力:["", "b"]

str = "1あ20い3う40え5お60";
console.log(str.split(/\d+/));    // 出力:["", "あ", "い", "う", "え", "お", ""]
console.log(str.split(/(\d+)/));  // 出力:["", "1", "あ", "20", "い", "3", "う", "40", "え", "5", "お", "60", ""]

String.prototype.trim()【両端の空白削除】
String.prototype.trimStart()【先頭の空白削除】 ・String.prototype.trimEnd()【末尾の空白削除】
String.prototype.trimLeft()【左端の空白削除】 ・String.prototype.trimRight()【右端の空白削除】

メモ

  • 両端の空白 (ホワイトスペース)を削除
    • 元の文字列は変更なし
    メソッド備考
    trim()【両端の空白削除】両端の空白 (ホワイトスペース)を削除
    trimStart()【先頭の空白削除】
    trimLeft()【左端の空白削除】
    先頭(左端)の空白削除
    trimEnd()【末尾の空白削除】
    trimRight()【右端の空白削除】
    末尾(右端)の空白削除
  • 外部リンク (英語)
    String.prototype.trim ( )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1
    String.prototype.trimStart ( )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1
    String.prototype.trimEnd ( )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1
    String.prototype.trimLeft ( )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1
    String.prototype.trimRight ( )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1

構文

string.trim()
string.trimStart() 
string.trimEnd() 
string.trimLeft() 
string.trimRight() 

戻り値空白削除後の文字列

const str1 = "  A B C  ";
console.log("[" + str1.trim() + "]");       // 出力:[A B C]
console.log("[" + str1.trimStart() + "]");  // 出力:[A B C  ]
console.log("[" + str1.trimEnd() + "]");    // 出力:[  A B C]
console.log("[" + str1.trimLeft() + "]");   // 出力:[A B C  ]
console.log("[" + str1.trimRight() + "]");  // 出力:[  A B C]

const str2 = " \n\t\r\f ABC \n\t\r\f ";
console.log("[" + str2.trim() + "]");                  // 出力:[ABC]
console.log("[" + encodeURI(str2.trimStart()) + "]");  // 出力:[ABC%20%0A%09%0D%0C%20]
console.log("[" + encodeURI(str2.trimEnd()) + "]");    // 出力:[%20%0A%09%0D%0C%20ABC]
console.log("[" + encodeURI(str2.trimLeft()) + "]");   // 出力:[ABC%20%0A%09%0D%0C%20]
console.log("[" + encodeURI(str2.trimRight()) + "]");  // 出力:[%20%0A%09%0D%0C%20ABC]

String.prototype.padStart()【先頭パディング】 ・String.prototype.padEnd()【末尾パディング】

メモ

  • 先頭 または 末尾を指定した文字列でパディング
    メソッド備考
    padStart()【先頭パディング】先頭に文字列をパディング
    padEnd()【末尾パディング】末尾を文字列をパディング
  • 外部リンク (英語)
    String.prototype.padStart ( maxLength [ , fillString ] )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1
    String.prototype.padEnd ( maxLength [ , fillString ] )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1

構文

string.padStart( maxLength[, fillString] ) 
string.padEnd( maxLength[, fillString] ) 

戻り値処理後の文字列 (元の文字列:maxLength < 元の文字列長)
maxLength処理後の文字列長
fillStringパディングする文字列 (省略:SP 0x0020)

const str = "123";
console.log("[" + str.padStart(5) + "]");          // 出力:[  123]
console.log("[" + str.padEnd(5) + "]");            // 出力:[123  ]
console.log("[" + str.padStart(2) + "]");          // 出力:[123]
console.log("[" + str.padEnd(2) + "]");            // 出力:[123]
console.log("[" + str.padStart(5, "0") + "]");     // 出力:[00123]
console.log("[" + str.padEnd(5, "0") + "]");       // 出力:[12300]
console.log("[" + str.padStart(5, "#") + "]");     // 出力:[##123]
console.log("[" + str.padEnd(5, "#") + "]");       // 出力:[123##]
console.log("[" + str.padStart(10, "ABC") + "]");  // 出力:[ABCABCA123]
console.log("[" + str.padEnd(10, "ABC") + "]");    // 出力:[123ABCABCA]