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", ...]

I would like it to display:

Imitation is suicide.

-Ralph Waldo Emerson

asked Jan 3 at 0:54

Heather Ramsey

add a comment |

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", ...]

I would like it to display:

Imitation is suicide.

-Ralph Waldo Emerson

asked Jan 3 at 0:54

Heather Ramsey

add a comment |

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", ...]

I would like it to display:

Imitation is suicide.

-Ralph Waldo Emerson

asked Jan 3 at 0:54

Heather Ramsey

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", ...]

I would like it to display:

Imitation is suicide.

-Ralph Waldo Emerson

javascript arrays

asked Jan 3 at 0:54

Heather Ramsey

asked Jan 3 at 0:54

Heather Ramsey

asked Jan 3 at 0:54

Heather Ramsey

asked Jan 3 at 0:54

Heather Ramsey

asked Jan 3 at 0:54

Heather Ramsey

add a comment |

2 Answers
2

active

oldest

votes

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

I have made a custom function checkSeperator which returns finalized string by splitting string with n and joins with  .

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.

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

1

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

add a comment |

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>

answered Jan 3 at 0:57

quirimmo

7,71811536

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015054%2fhow-to-start-a-new-line-within-a-string-within-an-array%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

I have made a custom function checkSeperator which returns finalized string by splitting string with n and joins with  .

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.

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

1

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

add a comment |

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

I have made a custom function checkSeperator which returns finalized string by splitting string with n and joins with  .

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.

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

1

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

add a comment |

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

I have made a custom function checkSeperator which returns finalized string by splitting string with n and joins with  .

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.

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

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

I have made a custom function checkSeperator which returns finalized string by splitting string with n and joins with  .

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.

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

edited Jan 3 at 3:03

answered Jan 3 at 1:13

Meet Zaveri

7511816

answered Jan 3 at 1:13

Meet Zaveri

7511816

answered Jan 3 at 1:13

Meet Zaveri

7511816

1

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

add a comment |

1

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

Thank you, that clarifies things for me and saved me a bit of time!

– Heather Ramsey
Jan 3 at 1:36

I am glad to provide an assist

– Meet Zaveri
Jan 3 at 3:05

add a comment |

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>

answered Jan 3 at 0:57

quirimmo

7,71811536

add a comment |

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>

answered Jan 3 at 0:57

quirimmo

7,71811536

add a comment |

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>

answered Jan 3 at 0:57

quirimmo

7,71811536

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>

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

<div id="test"></div>

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

<div id="test"></div>

answered Jan 3 at 0:57

quirimmo

7,71811536

answered Jan 3 at 0:57

quirimmo

7,71811536

answered Jan 3 at 0:57

quirimmo

7,71811536

answered Jan 3 at 0:57

quirimmo

7,71811536

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu