Как разбить строку в первом `/` (косая черта) и окружить ее часть в `<span>`?

167

Я хочу , чтобы отформатировать эту дату: <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?

javascript jquery date split substring Мустафа Ауссар
источник
1
На вашу скрипку не ссылаются jQueryЗдесь обновляется jsfiddle.net/K3D6d/2
Dhaval Marthak

Ответы:

374

С помощью 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
Мухаммед Адиль
источник
4
Вы также можете сократить скрипт следующим образом:var arr = $('#date').text().split('/');
SearchForKnowledge
Спасибо, Адиль. Ваш ответ стоит того, чтобы от него отказаться. Спасибо.
Анкит Сутар
10

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

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

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

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

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

Денис Сегюре
источник
2

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

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

$(document).ready(function(){
    $("#date").html('<span>'+$("#date").text().substring(0, 2) + '</span><br />'+$("#date").text().substring(3));     
});
А. Вольф
источник
1

пытаться

date.innerHTML= date.innerHTML.replace(/^(..)\//,'<span>$1</span></br>')
<div id="date">23/05/2013</div>
Развернуть фрагмент

Камил Келчевски
источник
0

использовать это

<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>
Ананд Шах
источник
это не работает Вы звоните .textна x? Ты уверен ?
Мухаммед Адиль
-2 
var str = "How are you doing today?";

var res = str.split(" ");

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

Вы также можете принять это объяснение, объявив его как

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

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

var FirstElement= res[0];

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

Майк Кларк
источник