When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Question

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Recently, I've been developing a browser-based notebook app. However, I encountered an issue where if I type a note like this:

*hello

this is my first note

The app displays it as:

hello this is my first note

Additionally, I want elements with the IDs of header and footer to remain fixed on the screen even while scrolling (similar to setting position to fixed, although this solution hasn't worked for me).

If you'd like to take a look at the project, check out the codes and test it yourself by visiting: Codepen

javascript html css bootstrap-4

Answer 1

Answer №1

To convert linebreaks and whitespaces into HTML, use the following code:

note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;');

Then, insert it into the innerHTML of the <li> instead of creating a textnode.

li.innerHTML = show;

See my example below:

const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");

let mynotes = {};
let i = 0;

add.addEventListener('click', function() {
  main.style.display = "block";
  submit.style.display = "inline";
  cancel.style.display = "inline";
  add.style.display = "none";
  screen.style.display = "none";
  del.style.display = "none";
  back.style.display = "none";
});

// Add event listener for submitting a new note
submit.addEventListener('click', function() {
  if (note.value) {
    newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;');
    if (newNote.length > 50) {
      show = newNote.substring(0, 46) + "...";
    } else {
      show = newNote;
    }

    if (mynotes.hasOwnProperty(show)) {
      show = show + `${++i}`;
    }

    mynotes[show] = newNote;

    var li = document.createElement("li");
    li.setAttribute('class', 'item');
    li.innerHTML = show;
    ul.appendChild(li);
    note.value = "";
  } else {
    alert("Can't add an empty note");
  }

  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  cancel.style.display = "none";
  add.style.display = "inline";
  del.style.display = "none";
  back.style.display = "none";
});

// Add event listener for clicking on a note item
ul.addEventListener('click', function(event) {
  node = event.target;
  item = event.target.innerHTML;
  text.innerHTML = mynotes[item];
  fullnote.style.display = "block';
  main.style.display = 'none';
  submit.style.display = 'none';
  add.style.display = 'none';
  screen.style.display = 'none';
  cancel.style.display = 'none';
  del.style.display = 'inline';
  back.style.display = 'inline';
});

// Add event listener for deleting a note
del.addEventListener('click', function() {
  ul.removeChild(node);
  delete mynotes[item];
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  back.style.display = 'none';
  del.style.display = 'none';
});

// Add event listener for cancelling
cancel.addEventListener('click', function() {
  note.value = "";
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  del.style.display = 'none';
  back.style.display = 'none';
  cancel.style.display = 'none';
})

back.addEventListener('click', function() {
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  back.style.display = 'none';
  del.style.display = 'none';
});

Answer 2

To convert linebreaks and whitespaces into HTML, use the following code:

note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;');

Then, insert it into the innerHTML of the <li> instead of creating a textnode.

li.innerHTML = show;

See my example below:

const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");

let mynotes = {};
let i = 0;

add.addEventListener('click', function() {
  main.style.display = "block";
  submit.style.display = "inline";
  cancel.style.display = "inline";
  add.style.display = "none";
  screen.style.display = "none";
  del.style.display = "none";
  back.style.display = "none";
});

// Add event listener for submitting a new note
submit.addEventListener('click', function() {
  if (note.value) {
    newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;');
    if (newNote.length > 50) {
      show = newNote.substring(0, 46) + "...";
    } else {
      show = newNote;
    }

    if (mynotes.hasOwnProperty(show)) {
      show = show + `${++i}`;
    }

    mynotes[show] = newNote;

    var li = document.createElement("li");
    li.setAttribute('class', 'item');
    li.innerHTML = show;
    ul.appendChild(li);
    note.value = "";
  } else {
    alert("Can't add an empty note");
  }

  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  cancel.style.display = "none";
  add.style.display = "inline";
  del.style.display = "none";
  back.style.display = "none";
});

// Add event listener for clicking on a note item
ul.addEventListener('click', function(event) {
  node = event.target;
  item = event.target.innerHTML;
  text.innerHTML = mynotes[item];
  fullnote.style.display = "block';
  main.style.display = 'none';
  submit.style.display = 'none';
  add.style.display = 'none';
  screen.style.display = 'none';
  cancel.style.display = 'none';
  del.style.display = 'inline';
  back.style.display = 'inline';
});

// Add event listener for deleting a note
del.addEventListener('click', function() {
  ul.removeChild(node);
  delete mynotes[item];
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  back.style.display = 'none';
  del.style.display = 'none';
});

// Add event listener for cancelling
cancel.addEventListener('click', function() {
  note.value = "";
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  del.style.display = 'none';
  back.style.display = 'none';
  cancel.style.display = 'none';
})

back.addEventListener('click', function() {
  main.style.display = 'none';
  screen.style.display = 'block';
  submit.style.display = 'none';
  add.style.display = 'inline';
  fullnote.style.display = 'none';
  back.style.display = 'none';
  del.style.display = 'none';
});

Answer 3

Answer №2

If you want to display text with line breaks, you have two options:

text = text.replace(/(?:\r\n|\r|\n)/g, '<br>');

Alternatively, you can achieve the same result using CSS:

.content, .line {
    white-space: pre-wrap;
}

Answer 4

If you want to display text with line breaks, you have two options:

text = text.replace(/(?:\r\n|\r|\n)/g, '<br>');

Alternatively, you can achieve the same result using CSS:

.content, .line {
    white-space: pre-wrap;
}

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Answer №1

Answer №2

Similar questions

Optimizing CSS across various pages and screens sizes with critical importance

Whenever a user tries to retrieve a page using ajax and then proceeds to submit the form associated with that page, they encounter

Is it possible to dynamically load JavaScript?

Converting Background Images from html styling to Next.js

Create a way to allow users to download html2canvas with a customized filename

What is the best way to update this payload object?

The art of aligning text in CKEditor5

The lookahead will only find a match if there are brackets present within the string

Storing a color palette in a MySQL database from an HTML table

What are some reasons why the XMLHttpRequest ProgressEvent.lengthComputable property could return a value of

Arrange two input fields side by side if the quantity of input fields is unspecified

Change the class of <body> when the button is clicked

How to automatically refresh a page when the URL changes with Next.js router?

Tips for accessing elements other than the root element using this.$el

Cloning a table row through editing functionality in ReactJS

How to efficiently target and manipulate links using jQuery Mobile

What is the best way to extract data using Angular from the backend and then transfer it to the frontend using Node.js?

Align buttons in the center of a card or container using HTML and CSS

Transforming a JSON structure into a tree model for use with the angular-tree-control component

What is the process for establishing the default type for an Activity Entity in Microsoft Dynamics?