jquery - 使用 jQuery 将第一个和第二个单词包装在两个不同的跨度中

Question

我已经尝试了这里找到的另外两个建议来在一个单词周围放置一个跨度，但每次它都会导致跨度出现在文本上方而不是它周围。

我有以下代码：

<div class="dateCalendar">
June 10
</div>

我目前使用的 jQuery 是：

$('.dateCalendar').html(function(i, v) { return v.replace(/\s(.*?)\s/, '$1'); });

HTML 输出显示如下：

<div class="dateCalendar">
<span></span>
June 10
</div>

理想情况下，最后我想将月份包装在一个跨度中，将日期包装在另一个跨度中，这样我就可以在 css 中对它们进行不同的样式设置。

一些可能有助于了解的注意事项：

• .dateCalendar 将在页面上出现多次
• 日期在我无法更改的 Wordpress 插件中用 PHP 编码

Answer 1

尝试

$('.dateCalendar').html(function(i, v) { 
    return $.trim(v).replace(/(\w+)/g, '<span>$1</span>'); 
});

演示：小提琴

Answer 2

这个怎么样 - 假设只有两个词：

现场演示

$('.dateCalendar').each(function () {
  var cal = $(this); 
  var texts = $(this).text().split(" ");
  cal.empty();                   
  $.each(texts,function (i, text) {
    cal.append('<span class="' + (i == 0 ? "month" : "year") + '" >'+text+'</span>');
  });
});

Answer 3

您快到了。它失败的原因是结果内容没有包含在任何标签内。

见http://jsfiddle.net/ZymGK/1/。基本上，这会为每个“单词”（由空格分隔）返回一个元素数组，span并将每个div元素的内容与 class .dateCalendar。