如何在第一个‘/’(斜杠)处拆分字符串，并将其中的一部分环绕在‘ < span >’中？

我想格式化这个日期: <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 吗？

670666 次浏览
小开

你应该使用 html () :

看演示

$(document).ready(function(){
$("#date").html('<span>'+$("#date").text().substring(0, 2) + '</span><br />'+$("#date").text().substring(3));
});
小开

用这个

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

与其使用带有固定索引的子字符串，不如使用 replace:

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

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

这个构造的另一个优点是，它可以扩展到多个元素，例如可以扩展到所有实现类的元素，只需更改选择器即可。

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

小开
最佳答案

使用 强 > 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>

小提琴

在 /上拆分此字符串时

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

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

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013
小开 
var str = "How are you doing today?";


var res = str.split(" ");

这里的变量“ res”是一种数组。

您还可以通过将其声明为

var res[]= str.split(" ");

现在可以访问数组中的单个单词了。 假设您想访问数组的第三个元素，您可以通过索引数组元素来使用它。

var FirstElement= res[0];

现在变量 FirstElement 包含值‘ How’

小开

试试这个

$("div#date").text().trim().replace(/\W/g,'/');

演示

看看正则表达式 Http://regexone.com/lesson/misc_meta_characters

享受我们; -)

小开

试试看

date.innerHTML= date.innerHTML.replace(/^(..)\//,'<span>$1</span></br>')
<div id="date">23/05/2013</div>

小开 

var arr = $('#date').text().split('/');
console.log(arr);
$("#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>


提交答案