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

Posted

技术标签:

【中文标题】如何在第一个`/`(斜杠)处拆分字符串并在`<span>`中包围它的一部分?【英文标题】:How to split a string at the first `/` (slash) and surround part of it in a `<span>`? 【发布时间】:2013-05-18 16:04:38 【问题描述】:

我想格式化这个日期:&lt;div id="date"&gt;23/05/2013&lt;/div&gt;

首先,我想在第一个 / 处拆分字符串,并将其余部分放在下一行。接下来,我想将第一部分包围在一个&lt;span&gt;标签中,如下:

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

【问题讨论】:

你的小提琴没有被jQuery引用这里更新jsfiddle.net/K3D6d/2 【参考方案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>

Fiddle

当你在/上拆分这个字符串---&gt;23/05/2013

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

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

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

【讨论】:

你也可以像这样缩短脚本:var arr = $('#date').text().split('/'); 谢谢,阿迪尔。你的答案值得放弃。谢谢。【参考方案2】:

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

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

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

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

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

【讨论】:

【参考方案3】:

你应该使用 html():

SEE DEMO

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

【讨论】:

【参考方案4】:

试试

date.innerHTML= date.innerHTML.replace(/^(..)\//,'&lt;span&gt;$1&lt;/span&gt;&lt;/br&gt;')
&lt;div id="date"&gt;23/05/2013&lt;/div&gt;

【讨论】:

【参考方案5】:

使用这个

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

【讨论】:

这不起作用。你打电话给.text x ?你确定吗?【参考方案6】:

试试这个

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

DEMO

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

享受我们 ;-)

【讨论】:

【参考方案7】:
var str = "How are you doing today?";

var res = str.split(" ");

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

你也可以明确地声明它为

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

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

var FirstElement= res[0];

现在变量 FirstElement 包含值“How”

【讨论】:

以上是关于如何在第一个`/`(斜杠)处拆分字符串并在`<span>`中包围它的一部分?的主要内容,如果未能解决你的问题,请参考以下文章

正则表达式在第二个逗号处拆分

正则表达式 - 在第 n 个空格之间匹配数据并在第 n 个空格处停止

通过正斜杠或什么都不拆分字符串

Grep 查找文件中的特定模式并在第一个匹配项处停止

如何在第一个数字之后拆分街道地址?

如何在第一个逗号后拆分第一个竖线上的字符串?