web-dev-qa-db-fra.com

Comment diviser une chaîne à la première `/` (barre oblique) et en entourer une partie dans un `<span>`?

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

D'abord, je veux diviser la chaîne au premier / et avoir le reste à la ligne suivante. Ensuite, j'aimerais entourer la première partie d'une balise <span>, 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 ça ne marche pas. Est-ce que quelqu'un peut m'aider avec jQuery?

javascriptjquerydatesplitsubstring
165
Mustapha Aoussar

Utilisation de 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 scindez cette chaîne --->23/05/2013 sur /

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
368
Mohammad Adil

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 / se trouvait à une position différente.

Un autre avantage de cette construction est qu’elle serait extensible à plusieurs éléments, par exemple à tous ceux qui implémentent une classe, simplement en changeant le sélecteur.

Démonstration (notez que je devais sélectionner jQuery dans le menu dans la partie gauche de la fenêtre de jsfiddle)

10
Denys Séguret

Vous devriez utiliser html ():

VOIR DEMO

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

essayer

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

Essaye ça

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

DEMO

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

apprécie nous ;-)

0
KingRider

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>
0
Anand Shah