この記事について
本記事は、なにかの問題を解決するためのものではありません。
やりたいこと
Chromeの開発者ツールから、入力欄(input[type="text"]
)の値の一部を変更したい
具体的に
- 日付部分を20210201から20210301に変更したい
- ただし、日付の前に特定の番号(引数で指定する)がついている場合は変更しない
実行環境
- OS: Windows10
- ブラウザ: Google Chrome(94.0.4606.81)
実際に書いたコード
Consoleで実行するJavaScriptはこう書いた。(実際は意図通りに動いてないので、以下は正しくないのですが…)
- 配列で取れる入力欄要素を、
forEach
でループさせる- 関数の引数に指定した文字列の配列に対してループを回す
- 入力欄の値の中に引数の値が含まれているかチェックする
- 含まれている場合:何もしない。次のループに移る
- 含まれていない場合:入力欄の値に置換をかける
- 入力欄の値の中に引数の値が含まれているかチェックする
- 関数の引数に指定した文字列の配列に対してループを回す
const lastMonth = '0201';
const thisMonth = '0301';
((...files) => {
$$('input[type="text"]').forEach((el) => {
for(let i = 0; files.length > i; i++) {
if(((el.value).indexOf(files[i]) != -1)) {
// 引数に指定した文字列が含まれていたら何もしない
return;
} else {
el.value = (el.value).replace(lastMonth, thisMonth);
}
}
})
})('131', '221');
以下のHTMLに対して上記のJavaScriptを実行する
<table>
<caption>テストテーブル</caption>
<thead>
<tr>
<th>項目名</th>
<th>入力欄</th>
</tr>
</thead>
<tbody>
<tr>
<td>テスト</td>
<td><input type='text' value='入力テスト'></td>
</tr>
<tr>
<td>名前</td>
<td><input type='text' value='2021/111_20210101.pdf'></td>
</tr>
<tr>
<td>身長</td>
<td><input type='text' value='2021/121_20210101.pdf'></td>
</tr>
<tr>
<td>年齢</td>
<td><input type='text' value='2021/131_20210201.pdf'></td>
</tr>
<tr>
<td>好きなもの</td>
<td><input type='text' value='2021/211_20210201.pdf'></td>
</tr>
<tr>
<td>よく行くカフェ</td>
<td><input type='text' value='2021/221_20210201.pdf'></td>
</tr>
</tbody>
</table>
実際の結果
- 引数で指定した1つ目の文字が含まれる値のみ、置換されていない
- 2つ目に指定した文字が含まれる値は置換されている
想定していた結果
引数で指定した文字が含まれる入力欄は、すべて置換対象に入らない
想定通りにいかない原因
まず、今回出てくる配列2つを以下の名前に置き換える
- 入力欄の配列:A
- 引数で指定した文字の配列:B
先述のコードでは、チェックの部分が下記の挙動になる
- A配列の値それぞれにB配列の値をそれぞれ書いた通りの順番でチェックする
- 引数に311と331と指定すれば、1番目に311、2番目に331とのチェックがおこなわれる
A配列の値に含まれる文字がB配列にあっても、順番次第で置換が発生する。結果としてうまくいかない
うまくいくようにしたが関数を使うやり方に変えたい
どうしても想定通りに動くようにしたくて、ifとelse ifをたくさん使うコードを書いた
const inp = $$('input[type="text"]');
const targets = ['131', '221'];
inp.map((el) => {
const val = el.value;
if(val.indexOf(targets[0]) != -1) {
return;
} else if(val.indexOf(targets[1]) != -1) {
return;
}
el.value = val.replace('0201', '0301');
});
これだと想定通りにはなるが、targets
に値を増やせば増やすほどelse if
も増やさないといけない。定例業務に使う書き捨てのコードだからこそもっとシンプルにしたい…。
行き詰まった
まとめです。
「2つの配列をそれぞれ走査して、値を比較、それに応じてAかBの処理をおこなう」というコードを書きたいのですが、うまくいきませんでした。実装方法を思いつく未来が見えないので、ひとまずあがいた記録を残す意図でここに書きました。悔しい。。