如何在第一个`/`(斜杠)中拆分一个字符串并在`<span>`中包围它的一部分？

Question

我想格式化这个日期:<div id="date">23/05/2013</div>.

首先,我想在第一行拆分字符串,/然后将其余部分放在下一行.接下来,我想在<span>标签中包围第一部分,如下所示:

<div id="date">
<span>23</span>
05/2013</div>

23
05/2013

我做了什么:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="date">23/05/2013</div>
<script type="text/javascript">
  $(document).ready(function() {
    $("#date").text().substring(0, 2) + '<br />';
  });
</script>

见JSFiddle.

但这不起作用.有人可以用jQuery帮我吗？

Answer 1

运用 split()

片段:

var data =$('#date').text();
var arr = data.split('/');
$("#date").html("<span>"+arr[0] + "</span></br>" + arr[1]+"/"+arr[2]);	  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date">23/05/2013</div>

小提琴

当您拆分此字符串---> 23/05/2013时/

var myString = "23/05/2013";
var arr = myString.split('/');

你会得到一个大小的数组 3

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013

Answer 2

您最好使用replace以下内容,而不是使用具有固定索引的子字符串:

$("#date").html(function(t){
    return t.replace(/^([^\/]*\/)/, '<span>$1</span><br>')
});

一个优点是,如果第一个/位于不同的位置,它仍然可以工作.

这个结构的另一个优点是它可以扩展到多个元素,例如通过更改选择器可以扩展到实现类的所有元素.

演示(注意我必须在jsfiddle窗口左侧的菜单中选择jQuery)