이 기사에 대하여

이 기사는 어떤 문제를 해결하기위한 것이 아닙니다.

하고 싶은 일

Chrome 개발자 도구에서 입력란 ( input[type="text"] )의 일부 값을 변경하고 싶습니다.

구체적으로

날짜 부분을 20210201에서 20210301로 변경하고 싶습니다

단, 일자의 전에 특정의 번호 (인수로 지정한다)가 붙어있는 경우는 변경하지 않는다

실행 환경

OS: Windows10

브라우저: Google 크롬(94.0.4606.81)

실제로 작성한 코드

Console에서 실행하는 JavaScript는 이렇게 썼다. (실제는 의도대로 움직이지 않기 때문에, 이하는 올바르지 않습니다만…)

배열로 취할 수 있는 입력란 요소를 forEach 로 루프 시킨다

함수의 인수로 지정한 캐릭터 라인의 배열에 대해서 루프를 돌린다

입력란의 값 안에 인수의 값이 포함되어 있는지 체크한다

포함되어 있는 경우: 아무것도 하지 않는다. 다음 루프로 이동

포함되어 있지 않은 경우 : 입력란의 값에 치환을 한다

두 개의 배열을 각각 스캔하고 값을 비교하고 그에 따라 A 또는 B를 처리하고 싶습니다.

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>

실제 결과

인수로 지정된 첫 번째 문자를 포함하는 값만 대체되지 않습니다.

두 번째로 지정된 문자를 포함하는 값이 대체됩니다.

예상했던 결과

인수로 지정한 문자가 포함된 입력란은 모두 치환 대상에 들어가지 않는다

예상대로 가지 않는 원인

우선 이번에 나오는 배열 2개를 다음 이름으로 대체
- 입력란의 배열: A
- 인수로 지정된 문자 배열: B

앞의 코드에서 검사 부분은 다음과 같은 동작이됩니다.

A 배열의 값 각각에 B 배열의 값을 각각 쓴 대로의 순서로 체크한다

인수에 311과 331을 지정하면 첫 번째로 311, 두 번째로 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의 처리를 행한다"라고 하는 코드를 쓰고 싶습니다만, 잘 작동하지 않았습니다. 구현 방법을 생각해 내는 미래가 보이지 않기 때문에, 일단 오른 기록을 남기는 의도로 여기에 썼습니다. 억울하다. .