Bagaimana cara membagi sebuah string pada `/` (slash) pertama dan mengelilinginya dalam ``span>`?

167

Saya ingin memformat tanggal ini: <div id="date">23/05/2013</div>.

Pertama saya ingin membagi string pada yang pertama /dan sisanya di baris berikutnya. Selanjutnya, saya ingin mengelilingi bagian pertama dalam sebuah <span>tag, sebagai berikut:

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

Apa yang saya lakukan:

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

Lihat JSFiddle .

Tetapi ini tidak berhasil. Bisakah seseorang membantu saya dengan jQuery?

Mustapha Aoussar
sumber
1
Biola Anda tidak direferensikan dengan jQueryDi sini diperbarui jsfiddle.net/K3D6d/2
Dhaval Marthak

Jawaban:

374

Menggunakan split()

Cuplikan:

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>

Biola

Ketika Anda memisahkan string ini ---> 23/05/2013pada/

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

Anda akan mendapatkan berbagai ukuran 3

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013
Mohammad Adil
sumber
4
Anda juga dapat mempersingkat skrip seperti ini:var arr = $('#date').text().split('/');
SearchForKnowledge
Terima kasih, Adil. Jawaban Anda layak untuk diberikan. Terima kasih.
ankit suthar
10

Alih-alih menggunakan substring dengan indeks tetap, Anda sebaiknya menggunakan replace:

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

Satu keuntungan adalah bahwa itu masih akan berfungsi jika yang pertama /berada di posisi yang berbeda.

Keuntungan lain dari konstruk ini adalah bahwa ia dapat diperluas ke lebih dari satu elemen, misalnya untuk semua yang mengimplementasikan kelas, hanya dengan mengubah pemilih.

Demonstrasi (perhatikan bahwa saya harus memilih jQuery di menu di bagian kiri jendela jsfiddle)

Denys Séguret
sumber
2

Anda harus menggunakan html ():

MELIHAT DEMO

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

mencoba

date.innerHTML= date.innerHTML.replace(/^(..)\//,'<span>$1</span></br>')
<div id="date">23/05/2013</div>

Kamil Kiełczewski
sumber
0

Gunakan ini

<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>
Anand Shah
sumber
ini tidak berhasil. Anda menelepon .textpada x? apakah kamu yakin
Mohammad Adil
-2
var str = "How are you doing today?";

var res = str.split(" ");

Di sini variabel "res" adalah jenis array.

Anda juga dapat mengambil kejelasan ini dengan menyatakannya sebagai

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

Sekarang Anda dapat mengakses kata-kata individual dari array. Misalkan Anda ingin mengakses elemen ketiga dari array Anda dapat menggunakannya dengan mengindeks elemen array.

var FirstElement= res[0];

Sekarang variabel FirstElement berisi nilai 'How'

Mike Clark
sumber