Як розділити рядок на першому `/` (косою рискою) та оточити його частину в `<span>`?

Я хочу , щоб відформатувати цю дату: <div id="date">23/05/2013</div>.

Спочатку я хочу розділити рядок на першому, /а решту - у наступному рядку. Далі я хочу оточити першу частину <span>тегом таким чином:

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

23
05/2013

Що я зробив:

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

Дивіться JSFiddle .

Але це не працює. Може хтось допоможе мені з jQuery?

Використання split()

Фрагмент:

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>

Скрипка

Коли ви розділите цей рядок ---> 23/05/2013на/

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

ви отримаєте масив розмірів 3

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

Замість того, щоб використовувати підрядку з фіксованим індексом, краще використовувати replace:

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

Одна перевага полягає в тому, що вона все-таки спрацює, якщо перший /знаходиться в іншому положенні.

Ще одна перевага цієї конструкції полягає в тому, що вона може бути розширена до декількох елементів, наприклад до всіх, хто реалізує клас, просто змінивши селектор.

Демонстрація (зауважте, що мені довелося вибрати jQuery у меню в лівій частині вікна jsfiddle)

Ви повинні використовувати html ():

ВИДІТЬСЯ ДЕМО

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

спробуйте

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

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

використовуй це

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

Спробуйте це

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

DEMO

Подивіться регулярний вираз http://regexone.com/lesson/misc_meta_characters

насолоджуйтесь нами ;-)

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

var res = str.split(" ");

Тут змінна "res" є своєрідним масивом.

Ви також можете скористатися цією експлікацією, оголосивши її як

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

Тепер ви можете отримати доступ до окремих слів масиву. Припустимо, ви хочете отримати доступ до третього елемента масиву, ви можете використовувати його, індексуючи елементи масиву.

var FirstElement= res[0];

Тепер змінна FirstElement містить значення "How"