CODEWITHSUNDEEP
javascriptjquerydatesplitsubstring
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

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

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?

Upvotes: 169

Views: 685390

Answers (8)

Mitali Patel
Mitali Patel

Reputation: 427

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>

Upvotes: 1

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92417

try

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

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 385

KingRider
KingRider

Reputation: 2257

Try this

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

DEMO

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

enjoy us ;-)

Upvotes: 0

Mike Clark
Mike Clark

Reputation: 1870

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'

Upvotes: -2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

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)

Upvotes: 10

Anand Shah
Anand Shah

Reputation: 633

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>

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You should use html():

SEE DEMO

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

Upvotes: 2

Related Questions