jQuery turn string into span multiple instances

Question

I am trying to separate the .string into span elements for every .item but cannot find the proper way to do it.

I tried the function below but cannot get it working so that it only works on the closest .item.

$(".string").html(
  $(".string")
    .html()
    .split(" ")
    .map(function(el) {
      return "<span>" + el + "</span>";
    })
);

$(".item").each(function() {
  var arr = $(".string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(".this").closest(".string").html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

do you want to replace the div with 3 span or insert the span as children? — quirimmo
– quirimmo, Commented Jan 3, 2019 at 3:41

CertainPerformance · Accepted Answer · 2019-01-03 03:49:18Z

You first need to .find the .string inside the .item being iterated over with

var arr = $(this).find(".string").text().split(" ");

else your $(".string") will only match the first .string in the document. Then, to set the child .string of the .item being itearted over, use

$(this).find(".string").html(html);

(closest searches ancestors, not children)

Also make sure not to implicitly create a global variable with

for (i = 0; i < arr.length; ++i) {

(always declare variables you're going to use with const, let, or var)

$(".item").each(function() {
  var arr = $(this).find(".string").text().split(" ");
  var html = "";
  for (let i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(".string").html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

Or, if possible, you might iterate over the .strings directly:

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

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

Another option would be to use a regular expression replace - find non-space characters ((\S+)), and replace with those matched non-space characters surrounded by a span: <span>$1</span>:

$(".string").each(function() {
  $(this).html(
    $(this).html().replace(/(\S+)\s*/g, '<span>$1</span>')
  );
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

Kiran Shahi · Accepted Answer · 2019-01-03 03:53:26Z

You have little bit mistake in your code. change var arr = $(".string").text().split(" "); to var arr = $(this).find(">.string").text().split(" "); to find the .string inside the .item which is in current iteration of loop.

And change $(".this").closest(".string").html(html); to $(this).find(">.string").html(html); to replace the html of .string inside the .item which is in current iteration of loop.

$(".item").each(function() {
  var arr = $(this).find(">.string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(">.string").html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

quirimmo · Accepted Answer · 2019-01-03 03:46:15Z

0

Loop over all the .string elements and create a span for each text splitting by spaces. Then replace the current div with the created spans:

$.each($('.string'), (ind, val) => {
  const spans = $(val).text().split(' ').map(text => $(`<span>${text}</span>`));
  $(val).replaceWith(spans);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

answered Jan 3, 2019 at 3:46

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

jQuery turn string into span multiple instances

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related