How to select portion of array element after plus operator

Question

I'm almost done with my random quote machine I'm creating for FreeCodeCamp, but I'd like to italicize the second portion of each array item. I looked it up and found that wasn't working for me. Is there an easier way to target the 2nd portion of each item...I think it may be difficult but I'm fairly new so. Thanks!

    var quote = [
    "I could die for you. But I couldn't, and wouldn't, live for you." + "  —     Ayn Rand, The Fountainhead",
"There is not love of life without despair about life." + "  — Albert Camus, The Stranger",
"Every act of rebellion expresses a nostalgia for innocence and an appeal to the essence of being." + "  — Albert Camus, The Rebel: An Essay on Man in Revolt",
"Man is always prey to his truths. Once he has admitted them, he cannot free himself from them." + "  — Albert Camus, The Myth of Sisyphus and Other Essays",
"There is nothing outside of yourself that can ever enable you to get better, stronger, richer, quicker, or smarter. Everything is within. Everything exists. Seek nothing outside of yourself." + 
"  — Miyamoto Musashi, The Book of Five Rings",
"When one person suffers from a delusion, it is called insanity. When many people suffer from a delusion it is called a Religion." + "  — Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values",
"The books that the world calls immoral are books that show the world its own shame." + "  — Oscar Wilde, The Picture of Dorian Gray",
"Rather than love, than money, than fame, give me truth." + "  — Henry David Thoreau, Walden",
"For a friend with an understanding heart is worth no less than a brother" + "  — Homer, The Odyssey",
"You have power over your mind - not outside events. Realize this, and you will find strength." + "  — Marcus Aurelius, Meditations",
"The happiness of your life depends upon the quality of your thoughts." + "  — Marcus Aurelius, Meditations",
"Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth." + "  — Marcus Aurelius, Meditations",
"It's the job that's never started as takes longest to finish." + "  — J.R.R. Tolkien, The Lord of the Rings",
"History is a wheel, for the nature of man is fundamentally unchanging. What has happened before will perforce happen again." + "  — George R.R. Martin, A Feast for Crows" ,
"The first method for estimating the intelligence of a ruler is to look at the men he has around him." + "  — Niccolò Machiavelli, The Prince",
"Time makes more converts than reason." + "  — Thomas Paine, Common Sense",
];


  function showQuote(num) {
    return quote[num];
  }

  $(document).ready(function() {
    $('#newQuote').click(function() {
      $('#quoteHere').html(showQuote(Math.floor(Math.random() * 16)));
    });
  });

Italics are a presentation detail; it doesn't have anything to do with JavaScript strings or JavaScript native capabilities. You can simply wrap the portion of your strings you want italicized in `` tags, and the HTML/CSS presentation system will show the text the way you want. — Pointy, Apr 27 '16 at 20:27
why not split the strings in two parts in a separate array and combine it later with the tag, you need. — Nina Scholz, Apr 27 '16 at 20:32
Hmm, I'll fork my work and give this a shot again. Thank you. I also forget if I used before or lol. — M.M., Apr 27 '16 at 23:59

score 1 · Answer 1 · answered Apr 27 '16 at 20:44

You might find it easier to use an object to handle different parts of your record separately:

var quotes = [
    {
        quote: "When one person suffers from a delusion, it is called insanity. When many people suffer from a delusion it is called a Religion.",
        author: "Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values"
    }
];

// Pick a quote object using a random index
var selectedQuote = quotes[Math.floor(random()*quotes.length)];

// Render the quote into an HTML element
document.getElementById("quoteDisplay").innerHTML = selectedQuote.quote + " - <i>" + selectedQuote.author + "</i>";

In this way, you are separating your concerns: Data are stored separately from presentation.

You can even go a step further if you want to distinguish between author and work:

var quotes = [
    {
        quote: "When one person suffers from a delusion, it is called insanity. When many people suffer from a delusion it is called a Religion.",
        author: "Robert M. Pirsig",
        book: "Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values"
    }
];

I like this version the best. I was messing around with array objects earlier, but I was targeting the objects incorrectly. Thanks for your help. — M.M., Apr 27 '16 at 23:59
Feel free to accept this answer if it's your favorite and/or most useful for you. :-) — Platinum Azure, Apr 28 '16 at 14:53

score 1 · Answer 2 · answered Apr 27 '16 at 20:54

To keep it simple you can italicize in your js using str.italics(); It isn't the best practice. But it can be done for the sake of your question. I made a quick jsfiddle showing what I did to modify your array of strings. I used substrings to target the - in each string to split the author and quote.

   var quote = [
    "I could die for you. But I couldn't, and wouldn't, live for you." + "  —     Ayn Rand, The Fountainhead",
"There is not love of life without despair about life." + "  — Albert Camus, The Stranger",
"Every act of rebellion expresses a nostalgia for innocence and an appeal to the essence of being." + "  — Albert Camus, The Rebel: An Essay on Man in Revolt",
"Man is always prey to his truths. Once he has admitted them, he cannot free himself from them." + "  — Albert Camus, The Myth of Sisyphus and Other Essays",
"There is nothing outside of yourself that can ever enable you to get better, stronger, richer, quicker, or smarter. Everything is within. Everything exists. Seek nothing outside of yourself." + 
"  — Miyamoto Musashi, The Book of Five Rings",
"When one person suffers from a delusion, it is called insanity. When many people suffer from a delusion it is called a Religion." + "  — Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values",
"The books that the world calls immoral are books that show the world its own shame." + "  — Oscar Wilde, The Picture of Dorian Gray",
"Rather than love, than money, than fame, give me truth." + "  — Henry David Thoreau, Walden",
"For a friend with an understanding heart is worth no less than a brother" + "  — Homer, The Odyssey",
"You have power over your mind - not outside events. Realize this, and you will find strength." + "  — Marcus Aurelius, Meditations",
"The happiness of your life depends upon the quality of your thoughts." + "  — Marcus Aurelius, Meditations",
"Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth." + "  — Marcus Aurelius, Meditations",
"It's the job that's never started as takes longest to finish." + "  — J.R.R. Tolkien, The Lord of the Rings",
"History is a wheel, for the nature of man is fundamentally unchanging. What has happened before will perforce happen again." + "  — George R.R. Martin, A  Feast for Crows" ,
"The first method for estimating the intelligence of a ruler is to look at the men he has around him." + "  — Niccolò Machiavelli, The Prince",
"Time makes more converts than reason." + "  — Thomas Paine, Common Sense",
];
for (var i = 0; i < quote.length; i ++) {
  var temp = quote[i];
  var index  = temp.indexOf("—");
  var firstHalf = temp.substring(0, index);
  temp = temp.substring(index, temp.length);
  temp = temp.italics();
  quote[i] = firstHalf + temp;
}

  function showQuote(num) {

    return quote[num];
  }

  $(document).ready(function() {
    $('#newQuote').click(function() {
      $('#quoteHere').html(showQuote(Math.floor(Math.random() * 16)));
    }); 
  });

https://jsfiddle.net/6ctcaqrr/

Could also wrap the second half: `temp = '' + temp + '';` https://jsfiddle.net/isherwood/6ctcaqrr/1/ — isherwood, Apr 27 '16 at 20:57
Oh wow, thank you. I somehow understand what you wrote but certainly wouldn't have come up with that myself. Thanks for your work. — M.M., Apr 27 '16 at 23:56

score 0 · Answer 3 · answered Apr 27 '16 at 20:37

You can wrap the text inside an arbitrary HTML element and use either CSS, or inline styles to make the text italic. For example

<span class="italic">When one person suffers from a delusion ... converts than reason</span>

And in your CSS

span.italic {
    font-style: italic;
}

Or

<span style="font-style: italic;">When one person suffers from a delusion ... converts than reason</span>

score 0 · Answer 4 · answered Apr 27 '16 at 20:44

As Pointy said, Italics are a translation detail, so you will need to wrap tags in the second portion of the quote or use font-style as Ozrix suggested. To achieve that with your current selector you could try the following:

var quote = [
  ["I could die for you. But I couldn't, and wouldn't, live for you."," — Ayn Rand, The Fountainhead"]
...];

function showQuote(num) {
  return quote[num];
}

$(document).ready(function() {
  $('#newQuote').click(function() {
    var randomNum = Math.floor(Math.random() * 16);

    $('#quoteHere').html(showQuote(randomNum)[0]);
    $('#italicsHere').html(showQuote(randomNum)[1]);
  });
});

You want to split the two sections of the quote into arrays each containing two strings within the main array.

How to select portion of array element after plus operator

4 Answers4