Как разбить строку на первый символ '/' (косая черта) и заключить его в часть <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>

Ответ 1

Использование 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>

Ответ 2

Вместо использования подстроки с фиксированным индексом вам лучше использовать replace:

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

Одно из преимуществ заключается в том, что он будет работать, если первый / находится в другом положении.

Другим преимуществом этой конструкции является то, что она будет расширяться для более чем одного элемента, например, для всех тех, кто реализует класс, просто изменив селектор.

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

Ответ 3

Вы должны использовать html():

СМОТРЕТЬ ДЕМО

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

Ответ 4

используйте этот

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

Ответ 5

Попробуйте это

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

DEMO

Посмотрите регулярное выражение http://regexone.com/lesson/misc_meta_characters

наслаждайтесь, -)

Ответ 6

пытаться

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

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

Ответ 7

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

var res = str.split(" ");

Здесь переменная "res" является видом массива.

Вы также можете воспользоваться этой экспликацией, объявив ее как

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

Теперь вы можете получить доступ к отдельным словам массива. Предположим, вы хотите получить доступ к третьему элементу массива, который вы можете использовать, индексируя элементы массива.

var FirstElement= res[0];

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