javascript - 使用 jquery 在文本字符串之间包装一些 html 标记

Question

跨度内的这段文本是由 php 生成的，如果我要从每年添加标签到文本末尾。我不知道如何定位文本字符串来启动 jquery。

<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

<!-- output: --> 
<span class="price">
  RM1,088.00 
  <small>Annually + RM10.00 Setup Fee (Free Domain)</small>
</span>

Answer 1

此处最好的解决方案是修改 PHP 代码生成的输出。

如果那不可能，假设生成的字符串中的价格格式始终相同，您可以将文本按空格拆分以创建一个数组并分离出值。试试这个:

$('.price').html(function() {
  var values = $(this).text().trim().split(' ');
  return values.shift() + '<small>' + values.join(' ') + '</small>';
});

span small { 
  display: block;
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>
<span class="price">RM2,090,082.00 Annually + RM25.00 Setup Fee (Free Domain)</span>