Add a <input> element to the web page, and then listen to the change event of <input>, you can open the file explorer from the website and select a file.
original text in file
wrong read without \r\n
right read with \r\n
Listen for the change of <input> in the window.onload() function, then verify the file type and only open the .txt file. After opening the file, process \r and \n through processBlankLine(), mainly by replacing ‘\r\n’, ‘\n’, ‘\r’ with the special string ‘special_str_for_split’, and then splitting the original text with ‘special_str_for_split’ , finally merge the resulting arrays, and the effect of \r\n can be maintained.
code of keeping \r\n
When reading text from a .txt file and setting innerHTML for <p>, directly using p.innerHTML =text cannot display the \r\n effect correctly. At this time, the string needs to be split, and the ‘\n\r’, ‘\n’ , ‘\r’ are need correctly replaced with <br>. Although it is easy to replace ‘\n\r’ , ‘\n’ , ‘\r’ with <br> directly, but in Vue, if you want to assign each paragraph of text to <span> through a loop , the way to split to get the correct paragraph array in this post is better.
If yuo have any question or need any help
you can leave a comment or connect me with firstname.lastname@example.org