jQuery - Добавление дефиса внутри строки

Question

Я вытягиваю текст из опций выбора. Теперь я передаю эту строку значение в функцию Append(), но я хочу, чтобы добавить дефис в строку, для вызова имя изображения:

HTML:

<select> 
    <option>Demo Cars</option> 
    <option>New Cars</option> 
    <option>Used Cars</option> 
    <option>Other</option> 
</select> 

var p = 'http://myurl.com/images/'; 
$('select').eq(0).on('change',function(){ 
    $('#productQuote').empty(); 
    var j = $(this).children(':selected').val(); 
    $('#productQuote').append('<img src="'+ p + j + '.jpg' '" />'); 
}); 

Например :

Если я выбираю первый вариант выбора, строка будет: «Demo Cars» и, следовательно, j == «Demo Cars».

Но теперь я хочу назвать его образ, а имена моих изображений не имеют пробелов внутри них. Итак, возникает вопрос, как добавить дефис между демонстрационными версиями и автомобилями? Метод замены()

Answer 1

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

var j = $(this).children(':selected').val().replace(/ /g, '-'); 

Answer 2

Использование:

var j = ... 
j = j.replace(" ", "-"); 

MDN documentation

Answer 3

Есть много простых способов сделать это, каждый с другой цели в разы , Вот несколько простых способов сделать это «inline», не затрагивая большую часть вашего уже используемого кода:

С .replace() (Недостатком является то, что у вас есть несколько пробелов, это не заменит их все. может быть remidied с регулярным выражением, как я покажу ниже, или разделить присоединиться)

$('#productQuote').append('<img src="'+ p + j.replace(" ", "-") + '.jpg" />'); 

Заменить ALL стиль:

$('#productQuote').append('<img src="'+ p + j.replace(/ /g, "-") + '.jpg" />'); 

с командой .split().join()

$('#productQuote').append('<img src="'+ p + j.split(" ").join("-") + '.jpg" />'); 

Answer 4

Пожалуйста, обратитесь http://jsfiddle.net/2dJAN/6/

<div class="btn-post">button text</div> 
<div id='test'> </div> 


$(document).ready(function(){ 
$('#test').html($('.btn-post').text().replace(" ", "-")); 
}); 

Я надеюсь, что это полезно для вас, чтобы достичь вашего запроса.

Answer 5

Вам не нужно делать это в JavaScript, поскольку это может быть достигнуто при разметке, тэг <option> имеет атрибут value, который вы должны использовать, поскольку это отделяет любые данные логики и представления.

Например, используя разметку ниже, вы можете использовать метод .val(), как вы уже есть, но он вернет value, а не текст.

<select> 
    <option value="demo-cars">Demo Cars</option> 
    <option value="new-cars">New Cars</option> 
    <option value="used-cars">Used Cars</option> 
    <option value="other">Other</option> 
</select>