replace【置換 (正規表現可・関数指定可)】
replaceAll【全置換 (正規表現可・関数指定可)】
split【分割 (正規表現可)】
trim【両端の空白削除】
trimStart【先頭の空白削除】 ・trimEnd【末尾の空白削除】
trimLeft【左端の空白削除】 ・trimRight【右端の空白削除】
padStart【先頭パディング】 ・padEnd【末尾パディング】
String.prototype.replace【置換 (正規表現可・関数指定可)】
メモ
概要
- 文字列の置換 (元の文字列は変更なし)
- 最初に見つかった1個のみ置換
- 全て置換する場合は、正規表現の'g'(グローバル検索) フラグを使用
replaceAll【全置換 (正規表現可・関数指定可)】 でも可 - 正規表現も可
- 置換用関数の指定も可
- 内部から RegExp[ @@replace ] 【置換 (関数指定可)】を呼び出し
外部リンク
- ECMA-262 (英語)
String.prototype.replace (searchValue, replaceValue ) ES2024 (15) ES2023 (14) ES2022 (13)
構文
string.replace( searchValue, replaceValue )
置換後の文字列
searchValue文字列 または RegExp【正規表現】オブジェクト (詳細は下記参照)
replaceValue置換文字列 または 置換用関数 (詳細は下記参照)
searchValue | 'g'(グローバル検索) フラグ | 処理 |
---|---|---|
RegExp オブジェクト以外 | ― | 文字列変換し、初めに一致した文字列のみ置換 |
RegExp オブジェクト (正規表現リテラル) | false | 初めにマッチした文字列のみ置換 |
true | 全てのマッチした文字列を置換 |
replaceValue (文字列):置換文字列 (以下の置換パターンも利用可能)
置換パターン | 備考 |
---|---|
$$ | '$' 文字 |
$& | マッチした部分文字列 |
$` | マッチした部分文字列の直前の文字列 |
$' | マッチした部分文字列の直後の文字列 |
$n | n (1~9)番目のキャプチャ文字列 |
$nn | nn (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【全置換 (正規表現可・関数指定可)】
メモ
概要
- 文字列の全置換 (元の文字列は変更なし)
- 正規表現も可 ( 'g'【グローバル検索】フラグ必須 )
- 置換用関数の指定も可
- 内部から RegExp[ @@replace ] 【置換 (関数指定可)】を呼び出し
関連
外部リンク
- ECMA-262 (英語)
String.prototype.replaceAll ( searchValue, replaceValue ) ES2024 (15) ES2023 (14) ES2022 (13)
構文
string.replaceAll( searchValue, replaceValue )
置換後の文字列
searchValue文字列 または RegExp【正規表現】オブジェクト (詳細は下記参照)
replaceValue置換文字列 または 置換用関数 (詳細は下記参照)
TypeError 例外正規表現の'g'【グローバル検索】フラグ未指定
searchValue | 'g'(グローバル検索) フラグ | 処理 |
---|---|---|
RegExp オブジェクト以外 | ― | 全てのマッチした文字列を置換 |
RegExp オブジェクト (正規表現リテラル) | false | TypeError 例外 |
true | 全てのマッチした文字列を置換 |
replaceValue (文字列):置換文字列 (以下の置換パターンも利用可能)
置換パターン | 備考 |
---|---|
$$ | '$' 文字 |
$& | マッチした部分文字列 |
$` | マッチした部分文字列の直前の文字列 |
$' | マッチした部分文字列の直後の文字列 |
$n | n (1~9)番目のキャプチャ文字列 |
$nn | nn (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【分割 (正規表現可)】
メモ
概要
- 文字列を指定セパレータ(正規表現可)で分割 (元の文字列は変更なし)
- 内部から RegExp[ @@split ] 【分割】を呼び出し
外部リンク
- ECMA-262 (英語)
String.prototype.split ( separator, limit ) ES2024 (15) ES2023 (14) ES2022 (13)
構文
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【右端の空白削除】末尾(右端)の空白削除
外部リンク
- ECMA-262 (英語)
String.prototype.trim ( ) ES2024 (15) ES2023 (14) ES2022 (13) String.prototype.trimStart ( ) ES2024 (15) ES2023 (14) ES2022 (13) String.prototype.trimEnd ( ) ES2024 (15) ES2023 (14) ES2022 (13) String.prototype.trimLeft ( ) ES2024 (15) ES2023 (14) ES2022 (13) String.prototype.trimRight ( ) ES2024 (15) ES2023 (14) ES2022 (13)
構文
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【末尾パディング】 末尾を文字列をパディング
外部リンク
- ECMA-262 (英語)
String.prototype.padStart ( maxLength [ , fillString ] ) ES2024 (15) ES2023 (14) ES2022 (13) String.prototype.padEnd ( maxLength [ , fillString ] ) ES2024 (15) ES2023 (14) ES2022 (13)
構文
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]