用正則表達式將單詞用“ /”分隔

Question

我有以下代碼片段：

HTML

<div class="colors">
    <h1>Colors:</h1>

    <div class="recipe"></div>
</div>

<div class="numbers">
    <h1>Numbers:</h1>

    <div class="recipe"></div>
</div>

<div class="people">
    <h1>People:</h1>

    <div class="recipe"></div>
</div>

JavaScript的

var colors = 'yellow / black / purple',
    numbers = '5 / 15 / 25',
    people = 'Brad Pitt / Leonardo DiCaprio / Anne Hathaway';

$('.colors .recipe').html(colors.replace(/(\w+)\/*/g, '<em>$1</em><br>'));

$('.numbers .recipe').html(numbers.replace(/(\w+)\/*/g, '<em>$1</em><br>'));

$('.people .recipe').html(people.replace(/(\w+)\/*/g, '<em>$1</em><br>'));

在jsFiddle中查看。

我對正則表達式不太滿意，然后在各自的配方上渲染分隔的值時，我得到了意外的結果（您可以在上面發布的jsFiddle中看到更多信息）。

我的意思是，以下結果為我顯示：

[...]

布拉德

皮特

/萊昂納多

迪卡普里奧

[...]

我想要和需要的是：

布拉德·皮特

萊昂納多·迪卡普里奧

沒有斜線，沒有分隔的名稱/姓氏。

Answer 1

您不需要正則表達式。 split方法可以完成以下任務：

var colors = 'yellow / black / purple',
    numbers = '5 / 15 / 25',
    people = 'Brad Pitt / Leonardo DiCaprio / Anne Hathaway';

function wrapEm(e) {
    return "<em>" + e + "</em>";
}

people.split(" / ").join("<br/>");

$('.colors .recipe').html(colors.split(" / ").map(wrapEm).join("<br/>"));
$('.numbers .recipe').html(numbers.split(" / ").map(wrapEm).join("<br/>"));
$('.people .recipe').html(people.split(" / ").map(wrapEm).join("<br/>"));

分裂像顧名思義，通過使用拆分串到一個數組/作為分隔符。

Answer 2

將您的正則表達式替換為：

/([^\/]+)\/*/g

而不是使用(\\w+)來表示單詞（不包含空格），您希望[^\\/]+表示除斜杠以外的任何內容。

Answer 3

這個正則表達式非常完美：

 $('.colors .recipe').html(colors.replace(/(\\)?\//g, '<em>$1</em><br>'));