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

Question

I'd like to create a javascript button that, when clicked on, italicizes randomly a bunch of words -- say 200 -- in a text. It means that only certain words should be in italics, but each time different ones (regardless of their function or nature -- verb, noun, subjet, preposition etc).

I was thinking of calling an array and then get "str.italics()", but that would mean that I'll have to methodically copy into the code all the words of that text, right ? Plus it seems to be non standard. I'm sure there's a prettier way to do that.

Thanks.

Will the text be in various parts of the DOM or contained in a single element? — Mike Cluck, May 09 '16 at 18:31

IrkenInvader · Accepted Answer · 2016-05-09T19:24:05.080

3

This will randomly add italics to words in a div. It uses a randomized array of 0 to [word count] numbers to determine which words should be italicized in the main text.

Adjust numWordsToItalicize to change the number of words italics are applied to.

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

edited May 09 '16 at 19:24

answered May 09 '16 at 18:39

IrkenInvader

4,030
1
12
23

Thanks. I have difficulties making it work though. Should the javascript be in a separate file or can i embed it in the html with the – Arntjine May 09 '16 at 20:37
You should be able to embed it with a script tag, do you have jQuery included? If you are getting any errors in the console when loading the page I might be able to help further. – IrkenInvader May 09 '16 at 20:43
I'll convert this into a pure js implementation quick – IrkenInvader May 09 '16 at 20:43
From the console I get : "TypeError: words is null" (words.html line 11 = this line : var initialText = words.innerHTML;) My html has your vanilla js code within the script tag just after the tag – Arntjine May 09 '16 at 21:06
Sounds like the script is running before your DOM is loaded, try wrapping that javascript in `document.addEventListener("DOMContentLoaded", function() { // code... });` – IrkenInvader May 09 '16 at 21:14
It works like a gem. The only problem i have now it that links get considered as texts and the tags are displayed in the html text... but without the initial " – Arntjine May 09 '16 at 21:24
Ah yeah that might be a problem, the thing assumes the contents of that div is just raw text and splits on all spaces. I can't actually think of a decent way to fix that at the moment :( – IrkenInvader May 09 '16 at 21:34
What about making an exception for links in the js ? Even if it forces to assign something like an id="link" to all them... – Arntjine May 09 '16 at 21:36
Would it be okay if none of the links were ever italicized? – IrkenInvader May 09 '16 at 21:37
Yes, I guess... There are only a few links in the text anyway. – Arntjine May 09 '16 at 21:39
Alright this is dumb but if you only have a few links and you don't change them much you could replace all spaces in the anchor tag with non-breaking spaces. To type a non breaking space hold alt and type 0160 on the num pad then let go of alt. My program splits on regular spaces (the non-breaking ones will be skipped) and should interpret your tags as a whole chuncks (it'll even wrap them in italics!) – IrkenInvader May 09 '16 at 22:01
on Bluefish i get something like that : – Arntjine May 09 '16 at 22:10
it would maybe be better to wrap the in some that would be excluded from the array – Arntjine May 09 '16 at 22:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111688/discussion-between-arntjine-and-irkeninvader). – Arntjine May 12 '16 at 04:06

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

1 Answers1