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

我有HTML:

    
30 dag beans
    
around 1,5 liter of water 

我有javascript:

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

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

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

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

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

.

这可以通过使用来解决

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

JSfiddle演示和 Regex101演示

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

脚步:

迭代

容器内的所有元素#ingredients

获取循环中当前段落元素的innerHTML

trim 空间

使用正则表达式^([\d,]+)提取字符串开头的数字并替换它$1,$1这是正则表达式捕获的数字.

正则表达式说明:

^:开始行

([\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,]+)/, '$1');
});

span {
  color: red
}

  
30 dag beans
  
around 1,5 liter of water