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:

constprocess = () => {
  // some file content with line breaksconst fileContent = 'line 1\nline 2\nline 3';

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

  // very basic example of processing:// grab the first line using a regexlet re = /(.*)\n/mi;
  // replace the matching with new surrounding contentlet 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;
}
<divid="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?"