CODEWITHSUNDEEP
javascriptarrays
Heather Ramsey
Heather Ramsey

Reputation: 17

How to start a new line within a string within an array?

I made a random quote generator on CodePen (url: https://codepen.io/hearamsey/pen/ebyLXj)

I set up my quotes in an array in my JS, but I want the author of the quote to be on a new line.

I have tried inserting \n where I want the line breaks:

var quotes = [
"How many cares one loses when one decides not to be something but to be someone. \n -Gabrielle “Coco” Chanel",
"Be who you are and say what you feel, because those who mind don’t matter and those who matter don’t mind. \n -Dr. Seuss",
"Imitation is suicide. \n -Ralph Waldo Emerson", ...]

Upvotes: 1

Views: 279

Answers (2)

Meet Zaveri
Meet Zaveri

Reputation: 3059

If your quotes array is going to be static, then try splitting out \n from string and replace it with <br/>. Otherwise you can manually replace \n with <br/> in array of quotes.

I have made a custom function checkSeperator which returns finalized string by splitting string with \n and joins with <br/>.

function checkSeperator(str) {
    if (str.includes("\n")) {
        var finalStr = str.split("\n").join(" <br/> ");
        return finalStr;
    } else {
        return str;
    }
}

Final Code :

var quotes = [
    "How many cares one loses when one decides not to be something but to be someone. \n -Gabrielle “Coco” Chanel",
    "Be who you are and say what you feel, because those who mind don’t matter and those who matter don’t mind. <br/> -Dr. Seuss",
    "We must not allow other people’s limited perceptions to define us. \n -Virginia Satir",
    "Don’t look for society to give you permission to be yourself. \n -Steve Maraboli",
    "If things go wrong, don’t go with them. \n -Roger Babson",
    "Wanting to be someone else is a waste of who you are. \n -Kurt Cobain",
    "Tension is who you think you should be. Relaxation is who you are. \n -Chinese Proverb",
    "Where’s your will to be weird? \n -Jim Morrison",
    "Some people say you are going the wrong way, when it’s simply a way of your own. \n -Angelina Jolie",
    "Remember to always be yourself. Unless you suck. \n -Joss Whedon",
    "Do what you can, with what you have, where you are. \n -Theodore Roosevelt",
    "To find yourself, think for yourself. \n -Socrates",
    "If you seek authenticity for authenticity’s sake you are no longer authentic. \n -Jean Paul Sartre",
    "Do what you must, And your friends will adjust. \n -Robert Brault",
    "Just let awareness have its way with you completely.<br/> -Scott Morrison",
    "We must be our own before we can be another’s. <br/> -Ralph Waldo Emerson",
    "This above all: to thine own self be true. <br/> -William Shakespeare"
];

function newQuote() {
    var randomNumber = Math.floor(Math.random() * quotes.length);
    document.getElementById("quoteDisplay").innerHTML = checkSeperator(
        quotes[randomNumber]
    );
}

function checkSeperator(str) {
    if (str.includes("\n")) {
        var finalStr = str.split("\n").join(" <br/> ");
        return finalStr;
    } else {
        return str;
    }
}

You can paste this code in codepen in js tab and it'll work.

Upvotes: 0

quirimmo
quirimmo

Reputation: 9988

You are injecting that string as HTML through innerHTML so you need to replace the \n with the tag for starting a new line in HTML, which is: br

document.querySelector('#test').innerHTML = 'BLA BLA <br/> BLA';
<div id="test"></div>

Upvotes: 2

Related Questions