带有jquery的段落中的随机粗体2个单词答案

【问题标题】：Random bold 2 words from a paragraph with jquery带有jquery的段落中的随机粗体2个单词
【发布时间】：2017-10-10 19:07:48
【问题描述】：

我正在寻找类似于可以在 slack 帮助中心https://get.slack.help/hc/en-us/categories/200111606 上看到的内容

他们成功地做到了这一点，而且似乎每个类别描述都有两三个随机单词，这些单词是粗体的。

我试过这个：

  //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>'));

并在这里进行了测试：https://doculus.zendesk.com/hc/en-us（不是我的网站）但我看不到相同的结果。

感谢任何帮助。

谢谢

【问题讨论】：

Slack 示例页面不是随机的 - 他们在每次加载时都会在相同的单词周围添加 <b> 标签。他们在页面加载后这样做的确切原因尚不清楚，因为这是一个非常不和谐的效果。
Slack 将粗体字作为关键字。例如：登录以放松
工作示例：codepen.io/graygilmore/pen/e74b1f3891f640a84d3462de98877813
感谢您的回复 :)

标签： javascript jquery

【解决方案1】：

Slack 使用粗体字作为关键字。例如：登录放松

但如果你真的需要加粗随机词：

用<span></span> 包装每个单词，并应用到其中的一些类上加粗。

$(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>

【讨论】：