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>

理想情况下，最后我想将月包含在一个范围内，并将 date 包装在另一个范围内，这样我就可以在css中对它们进行不同的设置。

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

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

Answer 1

尝试

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

演示：Fiddle

Answer 2

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

Live Demo

$('.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元素的内容与类.dateCalendar一致。

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

3 个答案: