jQueryを使用して、HTML上のテキストボックスに入力された値と、既に存在するリストが重複しないようにしたい

Question

前提・実現したいこと

こんにちは、質問させていただきます。

目的はタイトルの通りなのですが、HTMLのテキストボックスに入力された文字列と、
既にHTML上にリストとして存在している名前が被らないようにしたいということです。

該当のソースコード

<ul>
    <li>Aさん</li>
    <li>Bさん</li>
    <li>Cさん</li>
</ul>
<input type="text" id="name">
<input type="button" id="button" value="送信">

$(function () {
    $(document).on('click', '#button', function () {
        var name = $('#name').val();
    });
});

現状

上記にてテキストボックスに入力した文字列（名前）は、送信ボタンを押した時にjs側で変数に取得できている状態です。
この取得した値と、HTMLに存在するリスト一覧を比較して重複しないようにするにはどうしたらいいかわからない状態です。

名前が重複していた場合に、アラートを表示するようにできたらなと思っています。

お力をいただければと思います、よろしくお願いします。

補足情報

MacbookにてVScodeを使用しています。

Answer 1

こんにちは

以下によって、変数usedNames に、 <li>に囲まれた文字列の配列 ["Aさん", "Bさん", "Cさん"] を取得できます。

var usedNames = $('ul > li').map((_, e) => e.textContent).get();  // =>  ["Aさん", "Bさん", "Cさん"]

次に、ある配列の中に、指定する値と等しいものが含まれているかどうか判定する、配列のメソッド includes を使うと、 name に入っている値が usedNames に含まれていれば alert を表示する処理は、以下のように書けます。

if (usedNames.includes(name)) {
    alert(`${name}は既に存在します。`);
}

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/dyyNgWE?editors=1010

以上、参考になれば幸いです。

Comments

[bonkura05]

jun68ykt さん

その配列の取得方法やアラートの文字列内での書き方は初めて見ました..
丁寧なご説明も頂きありがとうございます..！

Answer 2

$(function () {
    $(document).on('click', '#button', function () {
        var name = $('#name').val();

        $('ul > li').each(function() {
            if ($(this).text() === name) {
                alert('重複しています。');
            }
        })
    });
});

Comments

[bonkura05]

naomi3 さん

ありがとうございます！
この形で実装させて頂きました！

Answer 3

    $(document).on('click', '#button', function () {
        var name = $('#name').val();
        var duplicate = $('li').contents().is(function() { return this.nodeType === 3 && this.nodeValue === name; });
        console.log(duplicate);
    });

https://api.jquery.com/contents/
https://api.jquery.com/is/#is-function

Comments

[bonkura05]

x_x さん

ご回答ありがとうございます！

変数duplicateはtrue/falseで判定されるのですね..
3行目を加えるだけでできるのかと思ったのですが当てはめてみたら
consoleでしっかり判定されておりました..
お勉強になります！！