Random bold 2 words from a paragraph with jquery

Question

I am looking for something similar to what can be seen on the slack Help Center https://get.slack.help/hc/en-us/categories/200111606

They successfully done this, and it appears that each category description from there, has two or three random words which are bolded.

I've tried this:

  //testing random words

  var words = $('.blocks-item-description').text().split(' ');

// with help from http://stackoverflow.com/questions/5915096/get-random-item-from-array-with-jquery

var randomWord = words[Math.floor(Math.random()*words.length)];

// with more help from http://stackoverflow.com/questions/2214794/wrap-some-specified-words-with-span-in-jquery

$('.blocks-item-description').html($('.blocks-item-description').html().replace(new RegExp( randomWord, 'g' ),'<strong>'+randomWord+'</strong>'));

And tested it here: https://doculus.zendesk.com/hc/en-us (not my website) but I was not able to see the same result.

Any help is appreciated.

Thanks

The Slack example page isn't random - they add the `` tags around the same words on every load. Exactly why they're doing it after the page loads is unclear as it's a very jarring effect. — Rory McCrossan, Oct 10 '17 at 10:59
The Slack make bold words that are keywords. E.g.: **Sign In** to slack — Justinas, Oct 10 '17 at 11:02
working example: https://codepen.io/graygilmore/pen/e74b1f3891f640a84d3462de98877813 — SNG, Oct 10 '17 at 11:11

score 0 · Answer 1 · answered Oct 10 '17 at 11:07

The Slack make bold words that are keywords. E.g.: Sign In to slack

But if you really need to bold random words:

Wrap every word with <span></span> and apply to some of them class for bold.

$(document).ready(function() {
  $('#text').html('<span>' + $('#text').text().replace(/ /g, '</span> <span>') + '</span>');

  for (var i = 0; i < 5; i++) {
    $('#text span').eq(Math.floor(Math.random() * $('#text span').length)).addClass('bold');
  }
});

.bold {
  font-weight: bold;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo ante et pharetra iaculis. Nam eget nunc convallis est finibus sollicitudin id at leo. Nullam convallis eros vitae pellentesque molestie. Aliquam facilisis porta lorem in congue. Proin
  ac neque elementum, placerat neque et, dictum ex. Nulla commodo, justo eu lacinia ultrices, sem lectus consequat lacus, sed tempor nibh tellus in enim. Quisque tincidunt odio magna, vel rhoncus mi condimentum eu. Ut nec dolor scelerisque ligula elementum
  pharetra. Fusce rutrum vel ipsum id tristique. Donec vestibulum maximus magna, quis vehicula magna pretium ut. Maecenas vel nunc ex. Proin dui lacus, ullamcorper vitae blandit sed, placerat ac neque. Orci varius natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Vivamus vel augue at neque aliquet elementum luctus vel erat.
</div>

Random bold 2 words from a paragraph with jquery

1 Answers1