2013-09-26 3 views
0

Я пытаюсь создать динамический построитель адресов, который будет использоваться в сочетании с GMap Geocoder.Как удалить оставшиеся запятые из строки с помощью JavaScript Regex?

Мой код подобен следующему:

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, , , , 

также, в некоторых случаях (по крайней мере, для моей области) есть два названия одного и то же место, и мы используем кома, чтобы отделить их. В примере адрес может стать чем-то вроде этого:

MyAddress, MySecondAddress, Cityname, State, zipCode, Country 

Вопрос:

в то время как адрес устроится автоматически, как я могу удалить оставшиеся запятые из адресной строки с помощью регулярных выражений?

+1

Почему вы не выбираете подход и добавляете непустые строки в адрес? – Reeno

+1

Есть ли причина, по которой вы используете параметр «class» для определения ваших полей вместо параметра «id»? –

ответ

3

Один из возможных подходов:

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), значение не добавляется к результирующему массиву.

+0

Позвольте мне проверить это :) В любом случае, спасибо за ваш ответ! :) –

+0

Первый подход не сработал.По какой-то причине второй метод замены не работал. Я попробовал много других комбинаций для этого, но все равно не работал. Во всяком случае, второй подход - это то, что мне нужно! Большое спасибо :) –

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

Использование 'replace' с параметром string вместо regex one -> всего лишь одна замена. Кроме того, даже если это решение сработало, оно не удалит конечные запятые. – raina77ow

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 для группы входов вместо.

Смежные вопросы