使用jquery在文本字符串之间包装一些html标记

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>

Answer 1

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> 

Answer 2

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> 

Answer 3

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/

Answer 4

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> 

Answer 5

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.