¿Cómo dividir una cadena en la primera `/` (barra diagonal) y rodear parte de ella en un ` `?

Quiero formatear 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 etiqueta <span>, de la siguiente manera:

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

23
05/2013

Lo que hice: 

<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. ¿Puede alguien ayudarme con jQuery?

Author: Mohammad Adil, 2013-05-23
Source

6 answers

Con split()

Fragmento de código: 

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>

Fiddle

Cuando se divide esta cadena ---> 23/05/2013 el / 

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

Obtendrá una matriz de tamaño 3

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013
 354
Author: Mohammad Adil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-08 10:12:46

En lugar de usar subcadena con un índice fijo, es mejor usar replace: 

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

Una ventaja es que todavía funcionaría si el primer / 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ú de la parte izquierda de la ventana de jsfiddle)

 9
Author: Denys Séguret,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 12:46:28

Debes usar html ():

VER DEMO 

$(document).ready(function(){
    $("#date").html('<span>'+$("#date").text().substring(0, 2) + '</span><br />'+$("#date").text().substring(3));     
});
 2
Author: A. Wolff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 10:30:32

Usa esto

<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
Author: Anand Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 10:31:05

Prueba esto

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

DEMO

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

Disfrute de nosotros; -)

 0
Author: KingRider,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-11 13:29:29 
var str = "How are you doing today?";

var res = str.split(" ");

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

También puedes tomar esta explicitud 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 matriz.

var FirstElement= res[0];

Ahora la variable FirstElement contiene el valor'How'

 -3
Author: Mike Clark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-03 11:37:35