匹配字符串与数字,但仅当数字前面有>时

Question

我有HTML:

<div id="ingredients">
    <p itemprop="ingredients">30 dag beans</p>
    <p itemprop="ingredients">around 1,5 liter of water </p>
</div>

我有javascript:

$('#ingredients').html(
    function (i, text) {
        return text.replace(/>([\d,]+)/g, '<span>$1</span>');
    });

正则表达式应该用'test'替换第一个数字,因为在数字之前有> tag.它不应该替换第二个数字(我们使用,对于数字小数),因为之前有空格.

所以我希望它只替换段落开头有数字的成分,而不是段落中间有数字的成分.

为什么不起作用？如果我在正则表达式中省略了>它可以工作,但是替换所有数字,甚至是在序列中间的数字.

Answer 1

你的正则表达式的问题是它也取代>了<p>.

这可以通过使用来解决

return text.replace(/>([\d,]+)/g, '><span>$1</span>');
                                   ^

JSfiddle演示和 Regex101演示

但有更好的方法来做到这一点.

脚步:

1. 迭代<p>容器内的所有元素#ingredients
2. 获取循环中当前段落元素的innerHTML
3. trim 空间
4. 使用正则表达式^([\d,]+)提取字符串开头的数字并替换它<span>$1</span>,$1这是正则表达式捕获的数字.

正则表达式说明:

1. ^:开始行
2. ([\d,]+):第一个捕获组.以任何顺序匹配一个或多个出现的数字和/或逗号.可以使用访问此捕获的组$1.

演示和 Regex101演示

// Iterate over all the paragraph elements inside the container
$('#ingredients p[itemprop="ingredients"]').html(function(index, text) {
  // text == innerText of the current `p` element

  // The value returned will be replaced to the innerHTML
  // First trim the string to remove leading and trailing spaces
  return text.trim().replace(/^([\d,]+)/, '<span>$1</span>');
});

span {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ingredients">
  <p itemprop="ingredients">30 dag beans</p>
  <p itemprop="ingredients">around 1,5 liter of water</p>
</div>