What is the best method for combining multiple lines into separate div or span tags using this text input field?

Question

What is the best method for combining multiple lines into separate div or span tags using this text input field?

Is it possible to merge multiple lines into different span tags using a text box?

There is a text box that allows me to insert new div/span class content, right? However, every time I want to add a new class, I have to enter a new line in the text box and press send. What I want now is to have 10 lines of content together with line breaks when pressing Enter.

For example:
My Line 1 is here
My Line 2 is here
My Line 3 is here
My Line 4 is here
My Line 5 is here
My Line 6 is here
My Line 7 is here
My Line 8 is here
...and so on

Then, I would like to copy all 10 lines into the text box at once, press send, and have each line added in a different div/span class instead of all in one class with the < br > tag as it currently works.

Please help me improve my code. Love you, helper, and thanks in advance

javascript html jquery css

Answer 1

Answer №1

I made some enhancements and streamlined your code below. It accomplishes the same tasks as what I believe your original code intended.

Just to note, I used .split("\n") to separate your input based on each newline character and then processed it accordingly.

Additionally, you mentioned inserting a div/span, but your code did not actually create a span tag. I have adjusted my code to include that functionality for you.

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("\n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="me"><span>${encodedLine}</span></div>`;
    innerDiv.innerHTML += newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
  });

  return output;
}

<div id="inner">
  <div class="incoming">
    <div class="them">Lorem
    </div>
  </div>
  <div class="outgoing">
    <div class="me">Lorem ipsum
    </div>
  </div>
</div>

<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>

Answer 2

I made some enhancements and streamlined your code below. It accomplishes the same tasks as what I believe your original code intended.

Just to note, I used .split("\n") to separate your input based on each newline character and then processed it accordingly.

Additionally, you mentioned inserting a div/span, but your code did not actually create a span tag. I have adjusted my code to include that functionality for you.

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("\n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="me"><span>${encodedLine}</span></div>`;
    innerDiv.innerHTML += newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
  });

  return output;
}

<div id="inner">
  <div class="incoming">
    <div class="them">Lorem
    </div>
  </div>
  <div class="outgoing">
    <div class="me">Lorem ipsum
    </div>
  </div>
</div>

<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>

Answer 3

Answer №2

If you want to separate each text using the String.prototype.split() method and split them by \n (new line) into an array, then iterate over each element using Array.prototype.forEach(), you can use the following code example:

submitButton.addEventListener('click', function () {
  inputField.value.split('\n').forEach((text) => {
    const message = new MessageBuilder().createMessage(text);
    container.appendChild(message);
  });
  inputField.value = '';
});

Answer 4

If you want to separate each text using the String.prototype.split() method and split them by \n (new line) into an array, then iterate over each element using Array.prototype.forEach(), you can use the following code example:

submitButton.addEventListener('click', function () {
  inputField.value.split('\n').forEach((text) => {
    const message = new MessageBuilder().createMessage(text);
    container.appendChild(message);
  });
  inputField.value = '';
});

What is the best method for combining multiple lines into separate div or span tags using this text input field?

Answer №1

Answer №2

Similar questions

Is it possible to fetch all the content contained within each set of <p> and </p> tags within a specific ID?

How to Dynamically Retrieve Keys from JSON Array in Javascript

How to automatically adjust select view in AngularJS as model value is updated

Update the index of each list object and then add them to the Angular controller

The function useNavigate in React Router DOM is failing to correctly redirect the page

How does the URL play a role in asynchronous functions when it comes to web scraping?

Placing the jQuery/javascript source pages right before the closing body tag

Is it possible to align an entire column to the right in the Material UI Data Grid?

Error: Vue.js is unable to find the reference for "_vm.KisanData" and throws a TypeError

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Passing an object through a JQuery hyperlink

I am currently encountering an issue with a code snippet that is not performing as anticipated and require clarification

Adjust the color of additional SVG paths upon hovering

Unable to send a response once the status has been set

The background is obscured from view because of its current positioning

The Vue.js checkbox linked to a v-model with a value set to false is currently marked as

Generating fresh dynamic IDs using JavaScript

What could be causing my RestFul API built with express and nodejs to crash every day?

Simple guide to identifying when the content of a dropdown option changes using jQuery

"Rotated element in Opera does not maintain event functionality when positioned outside its