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

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

メモ

概要

外部リンク

構文

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.replaceAll【全置換 (正規表現可・関数指定可)】

メモ

概要

関連

外部リンク

構文

string.replaceAll( searchValue, replaceValue ) 

置換後の文字列
searchValue文字列 または RegExp【正規表現】オブジェクト (詳細は下記参照)
replaceValue置換文字列 または 置換用関数 (詳細は下記参照)

TypeError 例外正規表現の'g'【グローバル検索】フラグ未指定
searchValue'g'(グローバル検索) フラグ処理
RegExp オブジェクト以外全てのマッチした文字列を置換
RegExp オブジェクト
(正規表現リテラル)
falseTypeError 例外
true全てのマッチした文字列を置換

replaceValue (文字列):置換文字列 (以下の置換パターンも利用可能)
置換パターン備考
$$'$' 文字
$&マッチした部分文字列
$`マッチした部分文字列の直前の文字列
$'マッチした部分文字列の直後の文字列
$nn (1~9)番目のキャプチャ文字列
$nnnn (01~99)番目のキャプチャ文字列
$<キャプチャ名> 名前付きキャプチャ文字列

replaceValue (関数):置換用関数 (一致回数分呼び出し)
引数名 (例)備考
matchedマッチした部分文字列
capture1~キャプチャ文字列 (キャプチャ数分:名前付きキャプチャを含む)
positionマッチ部分の開始位置
string置換元の全体文字列
namedCaptures 名前付きキャプチャの連想配列 (キャプチャ名・キャプチャ文字列)
戻り値型備考
文字列置換後の文字列

const str = "The quick brown fox jumps over the lazy dog.";
let s = str.replaceAll("o", "[o]");
console.log(s);
// 出力:The quick br[o]wn f[o]x jumps [o]ver the lazy d[o]g.

s = str.replaceAll(/o/g, "[O]");
console.log(s);
// 出力:The quick br[O]wn f[O]x jumps [O]ver the lazy d[O]g.

s = str.replaceAll(/o/, "[o]");
// 例外:TypeError

s = str.replaceAll(/([a-z]*o[a-z]*)/g, "[$1]");
console.log(s);
// 出力:The quick [brown] [fox] jumps [over] the lazy [dog].


function funcReplaceAll(matched, position, string) {
  console.log(matched, position, string);
  const str = "[ " + matched + " ]";
  return str;
}
s = str.replaceAll("o", funcReplaceAll);
// 出力:o 12 The quick brown fox jumps over the lazy dog.
// 出力:o 17 The quick brown fox jumps over the lazy dog.
// 出力:o 26 The quick brown fox jumps over the lazy dog.
// 出力:o 41 The quick brown fox jumps over the lazy dog.
console.log(s);
// 出力:The quick br[ o ]wn f[ o ]x jumps [ o ]ver the lazy d[ o ]g.


function funcReplaceAll_reg2(matched, capture1, capture2, position, string) {
  console.log(matched, capture1, capture2, position, string);
  const str = "[" + capture1 + "O" + capture2 + "]";
  return str;
}
s = str.replaceAll(/([a-z]*)o([a-z]*)/g, funcReplaceAll_reg2);
// 出力:brown br wn 10 The quick brown fox jumps over the lazy dog.
// 出力:fox f x 16 The quick brown fox jumps over the lazy dog.
// 出力:over  ver 26 The quick brown fox jumps over the lazy dog.
// 出力:dog d g 40 The quick brown fox jumps over the lazy dog.
console.log(s);
// 出力:The quick [brOwn] [fOx] jumps [Over] the lazy [dOg].


function funcReplaceAll_named(matched, capture1, capture2, position, string, namedCaptures) {
  console.log(matched, capture1, capture2, position, string, namedCaptures);
  const str = "[" + capture1 + " O " + capture2 + "]";
  return str;
}
s = str.replaceAll(/(?<name1>[a-z]*)o(?<name2>[a-z]*)/g, funcReplaceAll_named);
// 出力:brown br wn 10 The quick brown fox jumps over the lazy dog. {name1: "br", name2: "wn"}
// 出力:fox f x 16 The quick brown fox jumps over the lazy dog. {name1: "f", name2: "x"}
// 出力:over  ver 26 The quick brown fox jumps over the lazy dog. {name1: "", name2: "ver"}
// 出力:dog d g 40 The quick brown fox jumps over the lazy dog. {name1: "d", name2: "g"}
console.log(s);
// 出力:The quick [br O wn] [f O x] jumps [ O ver] the lazy [d O g].

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

メモ

概要

  • 文字列を指定セパレータ(正規表現可)で分割 (元の文字列は変更なし)

外部リンク

構文

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.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.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]