javascript - JavaScript 正規表現を使用して文字列から残りのコンマを削除するには?

Question

GMap Geocoder と組み合わせて使用​​する動的住所ビルダーを作成しようとしています。

私のコードは次のようなものです：

HTML

<input type="text" class="address" />
<input type="text" class="city" />
<input type="text" class="state" />
<input type="text" class="zipCode" />
<input type="text" class="country" />

JavaScript

$('.address, .city, .state, .zipCode, .country').blur(
    function()
    {
        var address = '';

        address += $('.address').val() + ', ';
        address += $('.city').val() + ', ';
        address += $('.state').val() + ', ';
        address += $('.zipCode').val() + ', ';
        address += $('.country').val();

        console.log(address);
    }
);

今の問題：

アドレス フィールドをぼかすと、コンソールに次のように表示されます。

MyAddress, , , ,

また、場合によっては (少なくとも私の地域では) 同じ場所に 2 つの名前があり、coma を使用してそれらを区切ります。例では、アドレスは次のようになります。

MyAddress, MySecondAddress, Cityname, State, zipCode, Country

質問：

アドレスは自動的に作成されますが、正規表現を使用してアドレス文字列から残りのコンマを削除するにはどうすればよいですか?

Answer 1

1 つの可能なアプローチ:

address = address.replace(/,(?:\s*,)+/g, ',').replace(/^,|,$/g, '');

しかし実際には、おそらく少し違ったやり方をするでしょう: 空でないすべての値を配列に集めてから、この配列を「,」で結合します:

var $addressFields = $('.address, .city, .state, .zipCode, .country');

$addressFields.blur(function() {
  var nonEmptyParts = $.map($addressFields, function(inp) {
    var inputStr = $.trim(inp.value);
    return inputStr === '' ? null : inputStr;
  });
  var fullAddress = nonEmptyParts.join(',');
  console.log(fullAddress);
});

ここで$.mapの便利な機能を採用しました: コールバック関数がnull(または) を返すときundefined、値は結果の配列に追加されません。

Answer 2

余分なカンマを削除するのではなく、問題の根本を修正する必要があります。そもそも、この方法でコンマを追加するべきではありません。ご覧のとおり、フィールドが空の場合でもカンマが追加されています。

次のようなことを試してください：

HTML:

<form id="myform">
    <input type="text" class="address" name="address" />
    <input type="text" class="city" name="city" />
    <input type="text" class="state" name="state" />
    <input type="text" class="zipCode" name="zipCode" />
    <input type="text" class="country" name="country" />
</form>

JS:

var address = [];

// no need for that long line of selectors
$("#myform > input").blur(function(e){
    if ($(this).val()) { // only add this field if it has a value
        address.push($(this).val());
    }
    console.log(address.join(', ')); // tada, no more extra commas
});

フォームに他の入力がある場合は、代わりに div を使用して入力をグループ化します。

Answer 3

address = address.replace(/( ?,)+/, '');