Skip to content Skip to sidebar Skip to footer

Is There A Way To Import A Text File And Display It Onto The Webpage But Also Make Specific Changes To Each Line On The Text File?

I want to import a text file (not user import), for example: Coding There are several languages... When the file is read, the first line should be in larger font and bolded, and

Solution 1:

You can simply modify the content from the file using RegEx and/or String.replace() to manipulate as needed.

A basic, rudimentary demo:

const process = () => {
  // some file content with line breaks
  const fileContent = 'line 1\nline 2\nline 3';

  const contentEditor = document.querySelector('#content');

  // very basic example of processing:
  // grab the first line using a regex
  let re = /(.*)\n/mi;
  // replace the matching with new surrounding content
  let edited = fileContent.replace(re, '<h1><b>$1</b></h1>\n');

  // replace breaks with <p>
  re = /\n(.*)/gim;
  edited = edited.replace(re, '<p>$1</p>');

  // display
  contentEditor.innerHTML = edited;

  console.info(edited);
}

window.addEventListener('load', process, false);
#content {
  min-height: 50vh;
  background: AliceBlue;
}
<div id="content"></div>

Post a Comment for "Is There A Way To Import A Text File And Display It Onto The Webpage But Also Make Specific Changes To Each Line On The Text File?"