First word wrap with and remaining text wrap with another separated with
tag using Jquery

Question

I want to add first word in one tag and remaining text in another tag separated with
between them. Basically I want this type of html structure.

<div class="hotspot-name">
  <span>Building</span>
  <br/>
  <span>One text text</span>
</div>

Whatever I have tried mentioned in below snippet.

$(".hotspot-name span").each(function () {
  var html = $(this).html().split(" ");
  html = html.slice(0, -1).join(" ") + " <br />" + html.pop();
  $(this).html(html);
});

.hotspot-name{margin-top:10px;}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="hotspot-name">
  <span>Building One</span>
</div>
<div class="hotspot-name">
  <span>Building Two test test</span>
</div>
<div class="hotspot-name">
  <span>Building Three test test</span>
</div>
<div class="hotspot-name">
  <span>Building Four</span>
</div>

Thanks!!

[This](http://stackoverflow.com/questions/3760085/first-word-in-string-with-jquery) will answer half of your question part. — Vishal Kumar Sahu, Feb 03 '17 at 11:39

score 4 · Answer 1 · edited May 23 '17 at 12:01

Array[0] in one span and then Remaining values pass with another element see the reference Array slice upto N .

I was updated with color for differentiate the two span

$(".hotspot-name span").each(function () {
  var html = $(this).html().split(" ");
  html = '<span class="first_span">'+html[0] + " </span><br /><span class='second_span'>" + html.slice(1).join(" ")+'</span>';
  $(this).html(html);
});

.hotspot-name{margin-top:10px;}

.first_span{
  color:green;
  }
.second_span{
  color:red;
  }

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="hotspot-name">
  <span>Building One</span>
</div>
<div class="hotspot-name">
  <span>Building Two test test</span>
</div>
<div class="hotspot-name">
  <span>Building Three test test</span>
</div>
<div class="hotspot-name">
  <span>Building Four</span>
</div>

Note that this doesn't output in the format the OP specifies. They requested that the values be placed in separate spans, not a single one. — Rory McCrossan, Feb 03 '17 at 11:41

score 2 · Accepted Answer · answered Feb 03 '17 at 11:39

To achieve this you can split the text of the span within the .hotspot-name elements to an array, and then build the two spans with the resulting values. Try this:

$('.hotspot-name span').text(function(i, t) {
  var arr = t.split(' ');
  var html = '<span>' + arr.shift() + '</span></br><span>' + arr.join(' ') + '</span>';
  $(this).closest('.hotspot-name').html(html);
});

.hotspot-name{ margin-top: 10px; }

/* only to show the effect working... */
.hotspot-name span:first-child { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="hotspot-name">
  <span>Building One</span>
</div>
<div class="hotspot-name">
  <span>Building Two test test</span>
</div>
<div class="hotspot-name">
  <span>Building Three test test</span>
</div>
<div class="hotspot-name">
  <span>Building Four</span>
</div>

score 0 · Answer 3 · answered Feb 03 '17 at 11:39

AS i understand will be:

$(".hotspot-name span").each(function () {
  var html = $(this).html().split(" ");
  html = html.slice(1, html.length).join(" ") + " <br />" + html.pop();
  $(this).text($(this).html().split(" ")[0]+'</br>');
$(this).append(<span>'+html+'</span>');
});

First word wrap with and remaining text wrap with another separated with tag using Jquery

3 Answers3

First word wrap with and remaining text wrap with another separated with
tag using Jquery