# Splitting a text into separate words while maintaining linebreaks

**URL:** https://discourse.processing.org/t/splitting-a-text-into-separate-words-while-maintaining-linebreaks/31019
**Category:** Coding Questions
**Created:** [July 2, 2021, 3:27pm UTC](https://discourse.processing.org/t/splitting-a-text-into-separate-words-while-maintaining-linebreaks/31019 "2021-07-02T15:27:38Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [July 2, 2021, 3:27pm UTC](https://discourse.processing.org/t/splitting-a-text-into-separate-words-while-maintaining-linebreaks/31019/1 "2021-07-02T15:27:38Z")

</div>

Hi

I have a string of text that contains linebreaks (`\n`). I want to make one word at a time appear every time I press the mouse. I can do that, however, I have an issue maintaining the linebreaks as they seem to get lost when I split the string. How might I do that?

Here is the sketch.js code

```auto
let writtenText = "Lorem ipsum. \ndolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
let myWords = [];
let wordIndex = 0;

let displayText = "";

function setup() {
  createCanvas(400, 400);
  myWords = trim(writtenText.split(" "));
}

function draw() {
  background(220);
}

function mousePressed() {
  document.getElementById("poem").innerHTML+=myWords[wordIndex] + " ";
  wordIndex++;
  if (wordIndex > myWords.length - 1) wordIndex = 0; 
}

```

And here is a link to the sketch:  
[https://editor.p5js.org/AndreasRef/sketches/KzmoLzlbT](https://editor.p5js.org/AndreasRef/sketches/KzmoLzlbT)

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [July 2, 2021, 3:43pm UTC](https://discourse.processing.org/t/splitting-a-text-into-separate-words-while-maintaining-linebreaks/31019/2 "2021-07-02T15:43:33Z")

</div>

Can you not split using the linebreaks first `"/n" `? This will mean producing an array of strings, then you split each line for spaces.

---

<div class="post-metadata">

### Author: ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [July 3, 2021, 1:00am UTC](https://discourse.processing.org/t/splitting-a-text-into-separate-words-while-maintaining-linebreaks/31019/3 "2021-07-03T01:00:02Z")

</div>

Your first problem is that you are calling the `trim()` function on your array of strings. The `trim()` function is going to remove all leading and trailing whitespace, including newlines, from each word. The second issue is that you’re appending the words as HTML content. In HTML newlines are, by default, treated as just a space. You have two options for including newlines in HTML: 1) set the `white-space` style property of the container element to the value `pre`, or 2) replace newlines with `<br />`.