如何在第一个`/`(斜杠)处分割字符串,并将其部分包围在``中?

2020/10/24 14:21 · javascript ·  · 0评论

我想格式化以下日期:<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吗?

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

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

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

一个优点是,如果第一个/位于其他位置,它仍然可以工作

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

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

您应该使用html():

查看演示

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

尝试

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

用这个

<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>

尝试这个

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

演示

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

享受我们;-)

var str = "How are you doing today?";

var res = str.split(" ");

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

您也可以通过将其声明为

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

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

var FirstElement= res[0];

现在变量FirstElement包含值“ How”

本文地址:http://javascript.askforanswer.com/ruhezaidiyige-xiegangchufengezifuchuanbingjiangqibufenbaoweizaizhong.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!