Wählen Sie zufällig Wörter auf einer Seite und kursiv kursiv auf JS Button klicken

Question

Ich möchte eine JavaScript-Schaltfläche erstellen, die, wenn angeklickt, zufällig eine Reihe von Wörtern - sagen wir 200 - in einem Text kursiviert. Es bedeutet, dass nur bestimmte Wörter kursiv sein sollten, aber jedes Mal andere (unabhängig von ihrer Funktion oder Natur - Verb, Nomen, Subjet, Präposition usw.).

Ich dachte daran, ein Array aufzurufen und dann "str.italics()" zu bekommen, aber das würde bedeuten, dass ich alle Wörter dieses Textes methodisch in den Code kopieren muss, richtig? Plus es scheint nicht Standard zu sein. Ich bin mir sicher, dass es einen schöneren Weg gibt, das zu tun.

Danke.

Answer 1

Dies wird kursiv Wörter zu einem div hinzufügen. Es verwendet ein randomisiertes Array von 0 bis [Anzahl Wörter], um zu bestimmen, welche Wörter im Haupttext kursiv sein sollen.

Passen Sie numWordsToItalicize an, um die Anzahl der kursiv gedruckten Wörter zu ändern.

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

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.