Como dividir uma string no primeiro `/` (barra) e envolver parte dela em um `<span>`?

Eu quero formatar esta data: <div id="date">23/05/2013</div>.

Primeiro, quero dividir a corda no primeiro /e ter o resto na próxima linha. Em seguida, gostaria de colocar a primeira parte em uma <span>tag, da seguinte maneira:

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

23
05/2013

O que eu fiz:

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

Veja o JSFiddle .

Mas isso não funciona. Alguém pode me ajudar com o jQuery?

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

Violino

Quando você divide essa string ---> 23/05/2013em/

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

você terá uma variedade de tamanho 3

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

Em vez de usar substring com um índice fixo, é melhor usar replace:

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

Uma vantagem é que ainda funcionaria se o primeiro /estiver em uma posição diferente.

Outra vantagem desse construto é que ele seria extensível a mais de um elemento, por exemplo, a todos os que implementam uma classe, apenas alterando o seletor.

Demonstração (observe que eu tive que selecionar o jQuery no menu à esquerda da janela do jsfiddle)

Você deve usar html ():

VER DEMO

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

experimentar

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

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

usa isto

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

Tente isto

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

DEMO

Procure uma expressão regular http://regexone.com/lesson/misc_meta_characters

divirta-se ;-)

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

var res = str.split(" ");

Aqui a variável "res" é uma espécie de matriz.

Você também pode considerar essa explicitação declarando-a como

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

Agora você pode acessar as palavras individuais da matriz. Suponha que você queira acessar o terceiro elemento da matriz que possa usá-lo indexando os elementos da matriz.

var FirstElement= res[0];

Agora a variável FirstElement contém o valor 'How'