Using jQuery how to split text into span array

Question

I want to split text to control it with html <span>

This my html code

<div class="siteLabel">Gallery/Technology/Music/Video/Business/Nature/People/Sports/Car/Fashion/Learn/Typography</div>

the result should be like this

<div class="siteLabel">
  <span>Gallery</span>
  <span>Technology</span>
  <span>Music</span>
  <span>Video</span>
  <span>Business</span>
  <span>Nature</span>
  <span>People</span>
  <span>Sports</span>
  <span>Car</span>
  <span>Fashion</span>
  <span>Learn</span>
  <span>Typography</span>
</div>

The problem is that the labels number not static it may be more or less, so i can't use something like .split('/')

using .split('/') require select every label by it's number Gallery [0] , Technology [1] and so on. but this text of labels not static it may changed so i can't select it using numbers. — Mohamed Abo ElGhranek
– Mohamed Abo ElGhranek, Commented Feb 3, 2015 at 5:01

Sadikhasan · Accepted Answer · 2015-02-03 05:03:48Z

3

var arr = $(".siteLabel").text().split("/");
var html="";
for (i = 0; i < arr.length; ++i) {
    html+= "<span>"+arr[i]+"</span>";
}
$(".siteLabel").html(html);

Demo

answered Feb 3, 2015 at 5:03

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack · Accepted Answer · 2015-02-03 05:03:55Z

1

My preference would be to still use .split('/'). Here is how you could do it using plain JavaScript:

var el = document.querySelector('.siteLabel');
var text = el.textContent ? el.textContent : el.innerText;
var items = text.split('/');
var html = '';

items.forEach(function(text){  
  html += '<span>'+text+'</span>';
});

el.innerHTML = html;

Demo: http://jsfiddle.net/e97e4Lsd/2/

answered Feb 3, 2015 at 5:03

Jack

9,5783 gold badges31 silver badges33 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-02-03 05:15:31Z

1

You can use a simple regex like

$('.siteLabel').html(function(i, html) {
  return html.trim().replace(/(.+?)(\/|$)/g, '<span>$1</span>')
})

.siteLabel span {
  margin-right: 5px;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="siteLabel">Gallery/Technology/Music/Video/Business/Nature/People/Sports/Car/Fashion/Learn/Typography</div>

edited Feb 3, 2015 at 5:15

answered Feb 3, 2015 at 5:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Mohamed Abo ElGhranek Over a year ago

Thanks Arun it's helpful but a small thing it gives one empty <span></span> at the end of the code.

guest271314 · Accepted Answer · 2015-02-03 05:41:51Z

1

Try

$(".siteLabel").html(function(_, words) {
  return words.match(/[^\/]\w+/g).map(function(word) {
           return $("<span>", {"html": word}).add("<br />")
         });
})

$(".siteLabel").html(function(_, words) {
  return words.match(/[^\/]\w+/g)
            .map(function(word) {
              return $("<span>", {"html": word}).add("<br />")
            });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="siteLabel">Gallery/Technology/Music/Video/Business/Nature/People/Sports/Car/Fashion/Learn/Typography</div>

edited Feb 3, 2015 at 5:41

answered Feb 3, 2015 at 5:26

guest271314

1

Comments

Praveen Prasannan · Accepted Answer · 2015-02-03 05:12:37Z

0

var items = $('.siteLabel').text().split('/');
    debugger;
$('.siteLabel').empty();
$.each(items, function(index, item){
    debugger;
    $('.siteLabel').append("<span>" + item)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Feb 3, 2015 at 5:12

Praveen Prasannan

7,15310 gold badges53 silver badges71 bronze badges

Collectives™ on Stack Overflow

Using jQuery how to split text into span array

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related