javascript - 如何在第一個 '/'（斜線）處拆分字串，並將其中一部分包裹在 '' 中？

我想要格式化這個日期：<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 嗎？

答案＃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

答案＃2

與其使用固定索引的子字串，不如使用 replace：

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

一個優點是，如果第一個 / 位於不同的位置，它仍然可以運作。

這個結構的另一個優點是，它可以擴展到不止一個元素，例如通過更改選擇器，就可以應用於所有實現某個類的元素。

示範（注意我必須在 jsfiddle 視窗左側的選單中選擇 jQuery）