Question

这是我的代码：

jQuery('.n2-ss-item-content').each(function(){
    var me = jQuery(this);
    me.html(me.html().replace(/^(\w+)/, '<i>$1</i>'));
});

HTML输出显示如下：

<i>Majesty</i> Purple | 24” w x 20” h | SOLD

假设它应该是这样的：

<i>Majesty Purple</i> | 24” w x 20” h | SOLD

Answer 1

jQuery('.n2-ss-1item1').each(function(){
    var me = jQuery(this);
    me.html(me.html().replace(/^([^|]+)/, '<i>$1</i>'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="n2-ss-1item1">Majesty Purple | 24” w x 20” h | SOLD</p>

<p class="n2-ss-1item1">Majesty Blue | 24” w x 20” h | SOLD</p>

Answer 2

您需要在正则表达式中包括空格以及单词字符，或使用否定的字符类来避免|，例如^([^|]+)。除此之外，您可以将html()与回调一起使用（第二个参数是旧的HTML内容），并使用返回的值在内部进行迭代和更新内容。

jQuery('.n2-ss-item-content').html(function(_, html){
    return html.replace(/^([\w ]+)/, '<i>$1</i>');
});

或

jQuery('.n2-ss-item-content').html(function(_, html){
    return html.replace(/^([^|]+)/, '<i>$1</i>');
});

jQuery('.n2-ss-item-content').html(function(_, html) {
  return html.replace(/^([\w ]+)/, '<i>$1</i>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="n2-ss-item-content">Majesty Purple | 24” w x 20” h | SOLD</p>
<p class="n2-ss-item-content">Majesty Blue | 24” w x 20” h | SOLD</p>

如何使用jQuery将两个斜体字的第一个单词和第二个单词包装起来

2 个答案: