随机选择页面中的单词并在 JS 按钮单击时将它们变为斜体答案

【问题标题】：Randomly pick words in a page and turn them into italics on JS button click随机选择页面中的单词并在 JS 按钮单击时将它们变为斜体
【发布时间】：2016-09-04 11:58:15
【问题描述】：

我想创建一个 javascript 按钮，单击该按钮时，文本中的一堆单词（例如 200）会随机变为斜体。这意味着只有某些词应该用斜体，但每次都是不同的（不管它们的功能或性质——动词、名词、主语、介词等）。

我正在考虑调用一个数组，然后获取“str.italics()”，但这意味着我必须有条不紊地将该文本的所有单词复制到代码中，对吧？另外，它似乎是非标准的。我确信有一种更漂亮的方法可以做到这一点。

谢谢。

【问题讨论】：

你已经有洗牌码了吗？
文本会位于 DOM 的各个部分还是包含在单个元素中？
文本是 DOM 的一部分。

标签： javascript jquery random typography italic

【解决方案1】：

这将在 div 中的单词中随机添加斜体。它使用一个由 0 到 [字数] 数字组成的随机数组来确定在正文中哪些单词应该是斜体。

调整numWordsToItalicize 以更改应用斜体字的字数。

Fiddle

Javascript

var words = $('#words');
var initialText = words.html();

function italics(){  
  var wordArr = initialText.split(' ');  
  var randomArray = getRandomArray(wordArr.length);
  numWordsToItalicize = 100; 

  for(var i = 0; i < numWordsToItalicize && i < wordArr.length; i++) {
    wordArr[randomArray[i]] = '<span class="italic">' + wordArr[randomArray[i]] + '</span>';    
  }  
  words.html(wordArr.join(' '));
}

function getRandomArray(length) {
  var arr = [];
  for(var i = 0; i < length; i++) { arr.push(i); }
  return shuffleArray(arr);
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

$('#doItalics').on('click', function(){
  italics();
});

HTML

<input id="doItalics" type="button" value="Italicize!" />
<div id="words">
  A large amount of text...
</div>

CSS

.italic {
  font-style: italic;
}

【讨论】：

谢谢。我很难让它工作。 javascript应该在一个单独的文件中还是我可以用
你应该可以用脚本标签嵌入它，你有 jQuery 吗？如果您在加载页面时在控制台中遇到任何错误，我可能会提供进一步的帮助。
我会快速把它转成纯js实现
从控制台我得到：“TypeError: words is null”（words.html line 11 = this line : var initialText = words.innerHTML;）我的 html 在 script 标签中有你的 vanilla js 代码就在标签之后
听起来脚本在加载 DOM 之前正在运行，请尝试将 javascript 包装在 document.addEventListener("DOMContentLoaded", function() { // code... });