この記事について

本記事は、なにかの問題を解決するためのものではありません。

やりたいこと

Chromeの開発者ツールから、入力欄（input[type="text"]）の値の一部を変更したい

具体的に

日付部分を20210201から20210301に変更したい
ただし、日付の前に特定の番号（引数で指定する）がついている場合は変更しない

実行環境

OS: Windows10
ブラウザ: Google Chrome（94.0.4606.81）

実際に書いたコード

Consoleで実行するJavaScriptはこう書いた。（実際は意図通りに動いてないので、以下は正しくないのですが…）

配列で取れる入力欄要素を、forEachでループさせる
- 関数の引数に指定した文字列の配列に対してループを回す
  - 入力欄の値の中に引数の値が含まれているかチェックする
    - 含まれている場合：何もしない。次のループに移る
    - 含まれていない場合：入力欄の値に置換をかける

2つの配列をそれぞれ走査・値を比較、それに応じてAかBの処理をおこないたい.js

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を実行する

index.html

<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をたくさん使うコードを書いた

チェックしたい文字の数だけelseifを増やす方法.js

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の処理をおこなう」というコードを書きたいのですが、うまくいきませんでした。実装方法を思いつく未来が見えないので、ひとまずあがいた記録を残す意図でここに書きました。悔しい。。