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?"