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

Question

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

我正在考虑调用一个数组然后得到 "str.italics()"，但这意味着我必须有条不紊地将该文本的所有单词复制到代码中，对吗？再加上它似乎是非标准的。我敢肯定有更好的方法可以做到这一点。

谢谢。

Answer 1

这将随机为 div 中的单词添加斜体。它使用 0 到 [word count] 数字的随机数组来确定哪些单词应该在正文中显示为斜体。

调整 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;
}

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

Randomly pick words in a page and turn them into italics on JS button click

javascript

random

jquery

typography

italic