Vyhledávání na webu

javascript - Jak rozdělit řetězec na první `/` (lomítko) a obalit jeho část do `<span>`?

Chci naformátovat toto datum: <div id="date">23/05/2013</div>.

Nejprve chci rozdělit řetězec na prvním / a zbytek mít v následujícím řádku. Poté bych chtěl obalit první část do tagu <span>, takto:

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

23
05/2013

Co jsem udělal:

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

Podívejte se na JSFiddle.

Ale to nefunguje. Může mi někdo pomoci s jQuery?

Odpověď č. 1

Používání split()

Ukázka :

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>

Housle

Když tuto řetězec ---> 23/05/2013 rozdělíte podle /

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

dostanete pole velikosti 3

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

Odpověď č. 2

Místo použití substring s pevně daným indexem je lepší použít replace :

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

Jednou z výhod je, že by to stále fungovalo, i kdyby první / byla na jiné pozici.

Další výhodou této konstrukce je, že by byla rozšiřitelná na více než jeden prvek, například na všechny, které implementují třídu, pouhou změnou selektoru.

Demonstrace (všimněte si, že jsem musel v nabídce v levé části okna jsfiddle vybrat jQuery)

Související články