Reveal words seperated by a comma

JavaScript
1

Hi guys,

I got a bit of script working that reveals a load of words seperated by a comma, I ran it and it worked, so I thought.

Until I realised the words are being revealed as single words, when ideally I want to words the reveal themselves as they are seperated by a comma, so it could be two words that reveal at the same time rather than always 1 at a time.

Its the list of oils at the bottom.

Link

var h1 = $('div#greeting p');

h1.hide().contents().each(function() {
var words;
if (this.nodeType === 3) {
words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
$(this).replaceWith(words);
} else if (this.nodeType === 1) {
this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
}
});
h1.find('span').hide().each(function() {
if( !$.trim(this.innerHTML) ) {
$(this).remove();
}
});
h1.show().find('span').each(function(i) {
$(this).delay(800 * i).fadeIn(800);
});

<div id="greeting">
<p>Ambrette Seed, Amyris, Angelica Root, Aniseed, Asafetida, Balsam (Copaiba), Balsam (Peru), Bay
Laurel, Benzoin, Bergamot, Black Pepper, Black Spruce, Cajeput, Caraway Seed, Cardamon, Carrot Seed, Cascarilla Bark, Cassie, Cedarwood (Atlas), Cedarwood (Virginian), Celery Seed, Chamomile (German), Chamomile (Roman), Cinnamon Leaf, Citronella, Clary Sage, Clove Bud, Coriander Seed, Costus, Cubebs, Cumin Seed, Cypress, Cypress (Blue), Dill Seed, Elemi, Eucalyptus (Blue Gum), Eucalyptus (Lemon-Scented), Eucalyptus (Dives), Fennel (Sweet), Frangipani, Fir Needle (Silver), Frankincense, French Basil, Galbanum, Gardenia, Geranium, Ginger, Grapefruit, Guaiacwood, Helichrysum, Hops, Hyacinth, Hyssop, Inula (Sweet), Jasmine, Juniperberry, Lavender (True), Lavender (Spike), Lemon, Lemongrass, Lime, Linaloe Wood, Linden Blossom, Lovage, Mandarin, Marjoram (Sweet), Mastic, May Chang, Melissa, Mimosa, Myrrh, Myrtle, Narcissus, Neroli, Niaouli, Nutmeg, Orange (Sweet), Palmarosa, Parsley Seed, Patchouli, Petitgrain, Pine (Scotch), Rose (Centifolia), Rose (Damask), Rose (Otto), Rosemary, Sandalwood, Spikenard, Tarragon, Tea Tree, Thyme, Tuberose, Turmeric Root, Turpentine, Vetiver, Violet Leaf, White Camphor, Yarrow, Ylang Ylang</p></div>
2

Split on the comma and the following space, that’ll give you whole phrases. You can add the comma back when you rejoin the strings:

words = '<span> ' + this.data.split(', ').join(', </span><span> ') + ' </span>';
1 Like
3

Ah yes, cheers fretburner.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.