CODEWITHSUNDEEP
javascriptjquerycss
Kevin
Kevin

Reputation: 25

How can I make one line of text bold in a paragraprah JQuery

I want to make Let's get you registered bold. With my code it's making all of the text bold, which I don't want.

$(function() {
  $('.page-register-new .variant-body').text('Let`s get you registered. Please fill in the form below and we will email you confirmation that your registration has been completed. All fields are mandatory. ');

  $('this:contains("Let`s get you registered")').css({
    'font-weight': 'bold'
  });
})

Upvotes: 1

Views: 357

Answers (2)

palaѕн
palaѕн

Reputation: 73896

You can replace the text with a <b> tag like:

$('.variant-body:contains("Let`s get you registered")').html(function(_, html) {
    return html.replace(/(Let`s get you registered)/g, '<b>$1</b>');
});

DEMO HERE:

$('.page-register-new .variant-body').html('Let`s get you registered. Please fill in the form below and we will email you confirmation that your registration has been completed. All fields are mandatory.');

$('.page-register-new .variant-body:contains("Let`s get you registered")').html(function(_, html) {
  return html.replace(/(Let`s get you registered)/g, '<b>$1</b>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-register-new">
  <div class="variant-body"></div>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You cannot affect the styling of individual words (or groups of words) within a single text node. You need to place that content within its own element and apply styling to that:

$(function() {
  $('.page-register-new .variant-body').html('<span>Let\'s get you registered.</span> Please fill in the form below and we will email you confirmation that your registration has been completed. All fields are mandatory.');
})
.page-register-new .variant-body span { font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-register-new">
  <div class="variant-body"></div>
</div>

Alternatively you could just use the b element directly:

$(function() {
  $('.page-register-new .variant-body').html('<b>Let\'s get you registered.</b> Please fill in the form below and we will email you confirmation that your registration has been completed. All fields are mandatory.');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-register-new">
  <div class="variant-body"></div>
</div>

Upvotes: 0

Related Questions