Comment diviser une chaîne au premier `/` (barre oblique) et en entourer une partie dans un `<span> '?

Je veux formater cette date: <div id="date">23/05/2013</div>.

Premièrement, je veux diviser la chaîne au début /et avoir le reste dans la ligne suivante. Ensuite, j'aimerais entourer la première partie d'une <span>balise, comme suit:

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

23
05/2013

Ce que j'ai fait:

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

Voir le JSFiddle .

Mais cela ne fonctionne pas. Quelqu'un peut-il m'aider avec jQuery?

En utilisant split()

Extrait:

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>

Violon

Lorsque vous divisez cette chaîne ---> 23/05/2013sur/

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

vous aurez un tableau de taille 3

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

Au lieu d'utiliser une sous-chaîne avec un index fixe, vous feriez mieux d'utiliser replace:

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

Un avantage est que cela fonctionnerait toujours si le premier /est à une position différente.

Un autre avantage de cette construction est qu'elle serait extensible à plus d'un élément, par exemple à tous ceux qui implémentent une classe, simplement en changeant le sélecteur.

Démonstration (notez que j'ai dû sélectionner jQuery dans le menu dans la partie gauche de la fenêtre de jsfiddle)

Vous devez utiliser html ():

VOIR LA DÉMO

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

essayer

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

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

utilisez ceci

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

Essaye ça

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

DEMO

Regardez une expression régulière http://regexone.com/lesson/misc_meta_characters

profitez de nous ;-)

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

var res = str.split(" ");

Ici, la variable "res" est une sorte de tableau.

Vous pouvez également prendre cette explicité en la déclarant comme

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

Vous pouvez maintenant accéder aux mots individuels du tableau. Supposons que vous souhaitiez accéder au troisième élément du tableau, vous pouvez l'utiliser en indexant les éléments du tableau.

var FirstElement= res[0];

Maintenant, la variable FirstElement contient la valeur 'How'