Separate a string by individual words and identify/insert line breaks

Question

Separate a string by individual words and identify/insert line breaks

For the purpose of animating headings word by word, I am attempting to divide a string by spaces. However, my CMS outputs line breaks as \n within the string.

const text = "Aenean non odio erat.\n Suspendisse vestibulum vulputate nulla et mollis."

const splitText = (text) => {
    const words = text.split(' ')
    return words
}

console.log(splitText(text))

When using this code, the result obtained is:

[
  "Aenean",
  "non",
  "odio",
  "erat.\n",
  ...
]

Is there a way to split the string by word while still retaining and visually displaying the line breaks (possibly with CSS using white-space: wrap; or pre-wrap)?

javascript split

Answer 1

Answer №1

The goal here is to standardize whitespaces initially, and then divide by a space, ensuring that newlines are associated with the previous word:

const text = "Aenean non odio erat.\nSuspendisse vestibulum \n \n \n    vulputate\n\nnulla et mollis."

const splitText = text => text
  .replace(/\\n/g, '\n')
  .replace(/\s+/g, m => m.includes('\n') ? '\n ' : ' ')
  .trim()
  .split(' ');

console.log(splitText(text))

Answer 2

The goal here is to standardize whitespaces initially, and then divide by a space, ensuring that newlines are associated with the previous word:

const text = "Aenean non odio erat.\nSuspendisse vestibulum \n \n \n    vulputate\n\nnulla et mollis."

const splitText = text => text
  .replace(/\\n/g, '\n')
  .replace(/\s+/g, m => m.includes('\n') ? '\n ' : ' ')
  .trim()
  .split(' ');

console.log(splitText(text))

Answer 3

Answer №2

It seems like there might be an issue with the code you provided. Make sure to check for any errors or typos in the code. Did you include all the necessary parts of the code?

Take a look at this:

const text = "Lorem ipsum dolor sit amet.\n consectetur adipiscing elit."

const splitText = (text) => {
    const words = text.split(' ')
    return words
}

console.log(splitText(text))

Answer 4

It seems like there might be an issue with the code you provided. Make sure to check for any errors or typos in the code. Did you include all the necessary parts of the code?

Take a look at this:

const text = "Lorem ipsum dolor sit amet.\n consectetur adipiscing elit."

const splitText = (text) => {
    const words = text.split(' ')
    return words
}

console.log(splitText(text))

Answer 5

Answer №3

Make sure to divide the text first by using new line "\n", and then by splitting it with spaces " ". You have found the correct answer. Please take a look at this code snippet for reference.

const sentence = "Lorem ipsum dolor sit amet.\n Consectetur adipiscing elit."

const splitSentence = (sentence) => {
            const words= sentence.split('\n').join("").split(' ');

            return words;
        }
 
console.log(splitSentence(sentence))

Answer 6

Make sure to divide the text first by using new line "\n", and then by splitting it with spaces " ". You have found the correct answer. Please take a look at this code snippet for reference.

const sentence = "Lorem ipsum dolor sit amet.\n Consectetur adipiscing elit."

const splitSentence = (sentence) => {
            const words= sentence.split('\n').join("").split(' ');

            return words;
        }
 
console.log(splitSentence(sentence))

Separate a string by individual words and identify/insert line breaks

Answer №1

Answer №2

Answer №3

Similar questions

The type 'number' cannot be assigned to the type 'Element'

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

Adjusting the position of the arrow helper to create more space from the

Obtain the URL within each promise

Interact with various contenteditable sections by navigating with the arrow keys

CSS hover effect ceases to function after the button has been clicked once

Is it safe to use v-html exclusively for text content?

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

Utilize custom SMTP with JavaScript to dispatch emails

Why do `resolutions` not receive support in package.json like they do in bower.json?

Double-Image Display: Ennui Content Slider showcasing dual images simultaneously

AngularJS Class Confirmation Button

Delete empty value key pairs from JSON data using JavaScript

What are the reasons for transitioning from using <script> includes to npm installs?

How can I handle JSON data that contains undefined values?

Is there a way to incorporate additional text into option text without compromising the existing values?

Storing JSON data in a MongoDb database using the Sails.js framework

Read a local file using the HTML5 FileReader

Error: Unable to locate module: Could not find '@/styles/globals.scss'