¿Cómo dividir una cadena en el primer `/` (barra oblicua) y rodear parte de ella en un `<span>`?

Quiero dar formato a esta fecha: <div id="date">23/05/2013</div>.

Primero quiero dividir la cadena en la primera /y tener el resto en la siguiente línea. A continuación, me gustaría rodear la primera parte en una <span>etiqueta, de la siguiente manera:

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

23
05/2013

Lo que hice:

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

Ver el JSFiddle .

Pero esto no funciona. ¿Alguien puede ayudarme con jQuery?

Utilizando split()

Fragmento

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>

Violín

Cuando divides esta cadena ---> 23/05/2013en/

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

obtendrás una variedad de tamaños 3

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

En lugar de usar una subcadena con un índice fijo, será mejor que uses replace:

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

Una ventaja es que aún funcionaría si el primero /está en una posición diferente.

Otra ventaja de esta construcción es que sería extensible a más de un elemento, por ejemplo a todos aquellos que implementan una clase, simplemente cambiando el selector.

Demostración (tenga en cuenta que tuve que seleccionar jQuery en el menú en la parte izquierda de la ventana de jsfiddle)

Debe usar html ():

VER DEMO

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

tratar

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

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

utilizar este

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

Prueba esto

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

MANIFESTACIÓN

Mira una expresión regular http://regexone.com/lesson/misc_meta_characters

disfrútanos ;-)

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

var res = str.split(" ");

Aquí la variable "res" es una especie de matriz.

También puede tomar esta explicidad declarándola como

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

Ahora puede acceder a las palabras individuales de la matriz. Supongamos que desea acceder al tercer elemento de la matriz, puede usarlo indexando elementos de la matriz.

var FirstElement= res[0];

Ahora la variable FirstElement contiene el valor 'Cómo'