用正则表达式将单词用“ /”分隔

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>'));