wrap some html tag between string of text by using jquery

Question

this text inside the span is generated by php, if I am going to add tag from annually to end of text. I dont know how to target the string of text to start the jquery.

<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

<!-- output: --> 
<span class="price">
  RM1,088.00 
  <small>Annually + RM10.00 Setup Fee (Free Domain)</small>
</span>

By I dont know how to target the string of text to start the jquery. you mean the RM1,088.00 text? Your question is a bit unclear, but maybe I don't understand it. What are you trying to achieve and what have your tried? — Ionut Necula
– Ionut Necula, Commented Mar 17, 2017 at 8:02
@lonut Rory McCrossan already help me to edit the post.. thanks so much.. you refer to my output.. that is what I want.. — Zi Gang
– Zi Gang, Commented Mar 17, 2017 at 8:04

Rory McCrossan · Accepted Answer · 2017-03-17 08:04:23Z

2

The best solution here would be to amend the output generated by your PHP code.

If that's not possible then, assuming the format of the price is always the same in the generated string, you can just split the text by the spaces to create an array and separate out the values. Try this:

$('.price').html(function() {
  var values = $(this).text().trim().split(' ');
  return values.shift() + '<small>' + values.join(' ') + '</small>';
});

span small { 
  display: block;
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>
<span class="price">RM2,090,082.00 Annually + RM25.00 Setup Fee (Free Domain)</span>

answered Mar 17, 2017 at 8:04

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

gyre · Accepted Answer · 2017-03-17 08:07:38Z

1

You can use Text#splitText to split a text node in two, at which point the second can be wrapped easily with jQuery:

$('.price').contents().each(function () {
  $(this.splitText(this.data.indexOf("Annually"))).wrap('<small>')
})

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

<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

answered Mar 17, 2017 at 8:07

gyre

16.8k4 gold badges40 silver badges47 bronze badges

1 Comment

gyre Over a year ago

Glad to help! An accept would always be appreciated if you feel my answer helped solve your problem :)

Alexandr Kudryashov · Accepted Answer · 2017-03-17 08:06:59Z

0

I think you might want to look a jQuery wrapInner.

$('.price').wrapInner('<small></small>');

Which will wrap the text of any sup with a link.

http://api.jquery.com/wrapInner/

answered Mar 17, 2017 at 8:06

Alexandr Kudryashov

6313 silver badges16 bronze badges

Comments

Abhinav · Accepted Answer · 2017-03-17 08:07:47Z

0

I think you want this...

$(function(){
  var text = $(".price").text();
  text = text.split("+");
  console.log(text[0] + text[1]);
  
  $('.price').html(text[0] + "<small>" + text[1] + "</small>");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

answered Mar 17, 2017 at 8:07

Abhinav

1,2001 gold badge8 silver badges12 bronze badges

Comments

Alessandro · Accepted Answer · 2017-03-17 08:20:30Z

0

You could easly split at first space and then attach around the second part the small tag, see following please:

var firstPart = $(".price").text().substr(0,$(".price").text().indexOf(' '));
    var secondPart = $(".price").text().substr($(".price").text().indexOf(' ')+1);
    var result = firstPart + "<small>" + secondPart + "</small>";
    $(".price").html(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

I hope it helps you, bye.

answered Mar 17, 2017 at 8:20

Alessandro

4,4729 gold badges43 silver badges71 bronze badges

Collectives™ on Stack Overflow

wrap some html tag between string of text by using jquery

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related