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”。

但是现在我想调用它的图像，我的图像名称不允许在其中包含空格。 所以，这就引出了一个问题，如何在Demo和Cars之间添加一个连字符？

Answer 1

使用replace（）方法：

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

MDN documentation

Answer 2

使用replace()方法。使用带有全局标志集的正则表达式将用连字符替换字符串中的所有空格，即使有多个空格：

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

Answer 3

有很多简单的方法可以做到这一点，每次都有不同的目的。以下是一些简单的方法来实现“内联”，而不会影响大部分已经可用的代码：

使用.replace()（缺点是如果你有多个空格，它将不会全部替换它们。这可以使用正则表达式进行重新编写，我将在下面显示，或者拆分连接）

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

替换所有样式：

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

团队为.split().join()

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

Answer 4

您不应该在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>

Answer 5

请参考 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(" ", "-"));
});

我希望这对您有所帮助。

jQuery - 在字符串中添加连字符

5 个答案: