Wie kann man eine Zeichenfolge beim ersten `/` (Schrägstrich) teilen und einen Teil davon in einem `<span>` umgeben?

167

Ich möchte dieses Datum formatieren : <div id="date">23/05/2013</div>.

Zuerst möchte ich den String beim ersten teilen /und den Rest in der nächsten Zeile haben. Als nächstes möchte ich den ersten Teil eines <span>Tags wie folgt umgeben:

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

Was ich getan habe:

<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>
Erweitern Sie das Snippet

Siehe die JSFiddle .

Das geht aber nicht. Kann mir jemand bei jQuery helfen?

javascript jquery date split substring Mustapha Aoussar
quelle
1
Ihre Geige, auf die nicht verwiesen wird jQueryHier ist aktualisiert jsfiddle.net/K3D6d/2
Dhaval Marthak

Antworten:

373

Verwenden von 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>
Erweitern Sie das Snippet

Geige

Wenn Sie diese Zeichenfolge ---> 23/05/2013weiter teilen/

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

Sie erhalten eine Reihe von Größen 3

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013
Mohammad Adil
quelle
4
Sie können das Skript auch folgendermaßen kürzen:var arr = $('#date').text().split('/');
SearchForKnowledge
Danke, Adil. Ihre Antwort ist es wert, eine aufzugeben. Vielen Dank.
Ankit Suthar
10

Anstatt Teilzeichenfolgen mit einem festen Index zu verwenden, sollten Sie Folgendes verwenden replace:

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

Ein Vorteil ist, dass es immer noch funktionieren würde, wenn sich der erste /an einer anderen Position befindet.

Ein weiterer Vorteil dieses Konstrukts besteht darin, dass es durch Ändern des Selektors auf mehr als ein Element erweiterbar ist, beispielsweise auf alle, die eine Klasse implementieren.

Demonstration (Beachten Sie, dass ich jQuery im Menü im linken Teil von jsfiddles Fenster auswählen musste)

Denys Séguret
quelle
2

Sie sollten html () verwenden:

SIEHE DEMO

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

Versuchen

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

Kamil Kiełczewski
quelle
0

benutze das

<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>
Anand Shah
quelle
das funktioniert nicht Sie rufen .textan x? bist du sicher ?
Mohammad Adil
-2 
var str = "How are you doing today?";

var res = str.split(" ");

Hier ist die Variable "res" eine Art Array.

Sie können diese Erklärung auch nehmen, indem Sie sie als deklarieren

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

Jetzt können Sie auf die einzelnen Wörter des Arrays zugreifen. Angenommen, Sie möchten auf das dritte Element des Arrays zugreifen, das Sie durch Indizieren von Array-Elementen verwenden können.

var FirstElement= res[0];

Jetzt enthält die Variable FirstElement den Wert 'How'

Mike Clark
quelle