0

I'm doing some tests on the Fetch function, and I'm using a txt file that should have like linebreaks/highlighted titles.

And when I imported the text and put into a variable, the console.log() showed up as it's supposed to. But using DOM to put into the HTML, the text just ignore everything but letters and spaces.

There's a way to correct that? Or I should try it another way?

Code below (only using the fetch function, the txt file is unnecessary I believe):

let basicText = ''

async function getBasicText(){
    const resposta = await fetch('./textos/pctBasico.txt')
    const texto = await resposta.text();
    let basicText = document.getElementById('pctBasicoDetail')
    basicText.innerHTML = texto
}

getBasicText()

Example:

*BOLD TITLE*
Paragraph
*ITALIC SENTENCE*
*BOLD TITLE*
Another paragraph

But it all goes one thing like:

TITLE PARAGRAPH SENTENCE TITLE PARAGRAPH
Tomalak
  • 332,285
  • 67
  • 532
  • 628
Lennon Kucharski
  • 11
  • 3
  • 1
    Do you have any code yet? https://stackoverflow.com/help/how-to-ask – ConnerWithAnE Mar 24 '22 at 02:46
  • 1
    I've updated the post, thanks. – Lennon Kucharski Mar 24 '22 at 02:56
  • 1
    Could you give an example of what you are inputting? – ConnerWithAnE Mar 24 '22 at 03:55
  • I've updated the post again. idk if this is even the right way to do what's in my head, just rambling – Lennon Kucharski Mar 24 '22 at 12:29
  • To pay attention to line breaks in the text, set the CSS property `white-space: pre;` on your target HTML element. To turn formatting hints like `'*italic*'` into real *italic*, research Markdown parsers - there are multiple choices for JS. – Tomalak Mar 24 '22 at 12:36
  • Plain text does not support things like bold formatting or italicized text. Sounds like what you have is RTF (rich text format) text or some other format. If so, please update your post with the actual format your text is in.. – Heretic Monkey Mar 24 '22 at 12:43
  • Actually I have plain text and wanted to know if I could format AFTER. Make sense what you're saying, will try those things later... (at work right now) – Lennon Kucharski Mar 24 '22 at 13:12
  • Does this answer your question? [Line break in HTML with '\n'](https://stackoverflow.com/questions/39325414/line-break-in-html-with-n) – Maarten Bicknese Mar 24 '22 at 14:10

1 Answers1

0

I think you can keep line breaks if you use pre tag. But you couldn't keep format of txt. Then how can you format text as BOLD and ITALIC in .txt file? You should use .md file. In .md, file you can format text using **bold** and *italic*. Then you can use components displaying md files.

tonwayer
  • 382
  • 1
  • 3
  • 11
  • I didn't know that .md extension, that may help. I've achieved my goals doing the text directly in the HTML file, but I've wanted it to be external – Lennon Kucharski Mar 24 '22 at 13:17