web-dev-qa-db-ja.com

文字列を最初の `/`（スラッシュ）で分割し、その一部を `<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を手伝ってくれる？

javascriptjquerydatesplitsubstring
162
Mustapha Aoussar

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

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

サイズ3の配列を取得します

arr[0] --> 23
arr[1] --> 05
arr[2] --> 2013
368
Mohammad Adil

固定インデックスでサブストリングを使用する代わりに、replaceを使用したほうがよいでしょう。

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

1つの利点は、最初の/が別の位置にあっても機能することです。

この構造のもう一つの利点は、セレクタを変更するだけで、たとえばクラスを実装するすべての要素など、複数の要素に拡張できることです。

デモンストレーション （jsfiddleのウィンドウの左側のメニューでjQueryを選択しなければならなかったことに注意してください）

10
Denys Séguret

あなたはhtml（）を使うべきです：

デモを見る

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

やってみる

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

これを試して

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

デモ

正規表現を見てください http://regexone.com/lesson/misc_meta_characters

お楽しみください;-)

0
KingRider

これを使って

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