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

Check out in jsFiddle.

我对正则表达式不满意，然后我在各自的食谱上渲染分离值时得到意想不到的结果（你可以在上面发布的jsFiddle上看到更多）。

我的意思是，以下结果显示给我：

[...]

布拉德

皮特

/ Leonardo

迪卡普里奥

[...]

我想要和需要的是：

布拉德皮特
莱昂纳多迪卡普里奥

没有斜线，没有分隔的名字/姓氏。

Answer 1

你不需要正则表达式。拆分方法可以完成这项工作：

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

将单词分隔为＆＃34; /＆＃34;与正则表达式

3 个答案: