How to split a string at the first `/` (slash) and surround part of it in a `<span>`?

Question

I want to format this date: <div id="date">23/05/2013</div>.

First I want to split the string at the first / and have the rest in the next line. Next, I’d like to surround the first part in a <span> tag, as follows:

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

23
05/2013

What I did:

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

See the JSFiddle.

But this does not work. Can someone help me with jQuery?

Your fiddle not referenced with jQuery Here is updated jsfiddle.net/K3D6d/2 — Dhaval Marthak
– Dhaval Marthak, Commented May 23, 2013 at 10:29

Bourbia Brahim · Accepted Answer · 2017-11-08 10:12:46Z

386

Using split()

Snippet :

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

When you split this string ---> 23/05/2013 on /

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

you'll get an array of size 3

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

edited Nov 8, 2017 at 10:12

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

answered May 23, 2013 at 10:33

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SearchForKnowledge Over a year ago

You can also shorten the script like this: var arr = $('#date').text().split('/');

always-a-learner Over a year ago

Thanks, Adil. Your answer is worth to give one up. Thanks.

Denys Séguret · Accepted Answer · 2013-05-23 12:46:28Z

10

Instead of using substring with a fixed index, you'd better use replace :

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

One advantage is that it would still work if the first / is at a different position.

Another advantage of this construct is that it would be extensible to more than one elements, for example to all those implementing a class, just by changing the selector.

Demonstration (note that I had to select jQuery in the menu in the left part of jsfiddle's window)

edited May 23, 2013 at 12:46

answered May 23, 2013 at 10:33

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Comments

A. Wolff · Accepted Answer · 2013-05-23 10:30:32Z

2

You should use html():

SEE DEMO

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

answered May 23, 2013 at 10:30

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-04-12 08:31:53Z

1

try

date.innerHTML= date.innerHTML.replace(/^(..)\//,'<span>$1</span></br>')

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

answered Apr 12, 2019 at 8:31

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Mitali Patel · Accepted Answer · 2022-09-05 09:35:00Z

1

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>

answered Sep 5, 2022 at 9:35

Mitali Patel

4453 silver badges10 bronze badges

Comments

Anand Shah · Accepted Answer · 2013-05-23 10:31:05Z

0

use this

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

answered May 23, 2013 at 10:31

Anand Shah

6337 silver badges14 bronze badges

1 Comment

Adil Shaikh Over a year ago

this doesn't work. you are calling .text on x ? are you sure ?

KingRider · Accepted Answer · 2016-03-11 13:29:29Z

0

Try this

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

DEMO

Look a regular expression http://regexone.com/lesson/misc_meta_characters

enjoy us ;-)

edited Mar 11, 2016 at 13:29

answered Mar 11, 2016 at 13:13

KingRider

2,26728 silver badges24 bronze badges

Comments

Mike Clark · Accepted Answer · 2015-02-03 11:37:35Z

-2

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

var res = str.split(" ");

Here the variable "res" is kind of array.

You can also take this explicity by declaring it as

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

Now you can access the individual words of the array. Suppose you want to access the third element of the array you can use it by indexing array elements.

var FirstElement= res[0];

Now the variable FirstElement contains the value 'How'

edited Feb 3, 2015 at 11:37

answered Feb 3, 2015 at 11:05

Mike Clark

1,88015 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to split a string at the first `/` (slash) and surround part of it in a `<span>`?

8 Answers 8

Fiddle

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Related