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

Question

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

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

谢谢。

Answer 1

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

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

小提琴

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