Jak rozdzielić napis na pierwszym `/` (ukośnik) i otoczyć jego część znakiem `<span>`?

Chcę sformatować tę datę: <div id="date">23/05/2013</div>.

Najpierw chcę podzielić ciąg w pierwszej, /a resztę umieścić w następnej linii. Następnie chciałbym otoczyć pierwszą część <span>tagiem w następujący sposób:

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

23
05/2013

Co ja zrobiłem:

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

Zobacz JSFiddle .

Ale to nie działa. Czy ktoś może mi pomóc z jQuery?

Za pomocą split()

Fragment:

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>

Skrzypce

Po podzielić ten ciąg ---> 23/05/2013na/

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

otrzymasz tablicę rozmiarów 3

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

Zamiast używać podłańcucha ze stałym indeksem, lepiej użyj replace:

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

Jedną z zalet jest to, że nadal działałby, gdyby pierwszy znajdował się /w innym miejscu.

Kolejną zaletą tej konstrukcji jest to, że byłaby rozszerzalna do więcej niż jednego elementu, na przykład do wszystkich implementujących klasę, po prostu zmieniając selektor.

Demonstracja (zauważ, że musiałem wybrać jQuery w menu w lewej części okna jsfiddle)

Powinieneś użyć html ():

ZOBACZ DEMO

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

próbować

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

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

Użyj tego

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

Spróbuj tego

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

PRÓBNY

Spójrz na wyrażenie regularne http://regexone.com/lesson/misc_meta_characters

baw się z nami ;-)

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

var res = str.split(" ");

Tutaj zmienna "res" jest rodzajem tablicy.

Możesz również wziąć tę jawność, deklarując ją jako

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

Teraz możesz uzyskać dostęp do poszczególnych słów tablicy. Załóżmy, że chcesz uzyskać dostęp do trzeciego elementu tablicy, możesz go użyć, indeksując elementy tablicy.

var FirstElement= res[0];

Teraz zmienna FirstElement zawiera wartość „Jak”