Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Node JS = Frontend text

Hej

Har en text "Welcome ...." som finns i filen "Welcome.txt"

Efter anrop från Front appen skickas texten med i responsen enligt:
Node JS

/* ==================================== Main server file ==================================== Basic Server module */ const express = require('express'); const fileSystem = require('fs'); let cors = require('cors'); const app = express(); app.use(express.json()); app.use(express.static('public')); app.use(cors()); // Import usefull files const textFile = require('./TextFile/ReadTextFile'); // The server information const port = 3001; app.listen(port, () => console.log(`server is listening on port ${port}!`)); // Run default app.get('/GetText', (req, res) => { console.log('========================= ReadTxtFile =========================================='); // Collecting all textFiles into a object const sendTextOStr = { textMain: fileSystem.readFileSync('./TextFile/Welcome.txt', 'utf8'), //textFile.welcome(), services: textFile.services(), aboutMe: '',//textFile.abouteMe(), } console.log("sendTextOStr", sendTextOStr.textMain) /* const getSendingType = req.params.pageText; console.log("getSendingType", getSendingType) */ res.status(200).send(sendTextOStr//[getSendingType] ); })

Texten tas emot i Frontenden och kommer i responsen via ett objekt och respektive nyckel. Nyckeln "textMain" har en ren sträng och allt kommer utan formatering med blankrader och styckeindelning. Lösningen tordes vara enkel genom att i HTML hårdkoda i texten. Vill dock kunna ändra på texten via min backend!

Hur kan man i responsen skicka med den korrekta formateringen som styckeindelning m.m.?

Ett json objekt blir väl likadant?

Mvh Fredrik

Computer: Windows 10, 64-bit, Intel i7 - 8700K, Asus ROG STRIX Z370-F GAMING, 16GB RAM and Asus GTX1080

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Aug 2010

Antingen kan du skriva vanlig HTML i filen och stoppa in den i ett element på det här sättet.
Eller om det räcker med vanlig text så kan du använda <pre>-taggen vilket går att läsa mer om här.

Du får gärna citera eller nämna mig (@ToJa92) om du svarar på något jag skrivit.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av ToJa92:

Antingen kan du skriva vanlig HTML i filen och stoppa in den i ett element på det här sättet.
Eller om det räcker med vanlig text så kan du använda <pre>-taggen vilket går att läsa mer om här.

Det fungerar fint med <pre> elementet men texten visas fortfarande som en hel sträng i webbläsaren. Tittar jag i domen så ser det korrekt ut!?

Computer: Windows 10, 64-bit, Intel i7 - 8700K, Asus ROG STRIX Z370-F GAMING, 16GB RAM and Asus GTX1080

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av freddehboy:

Det fungerar fint med <pre> elementet men texten visas fortfarande som en hel sträng i webbläsaren. Tittar jag i domen så ser det korrekt ut!?

Beror väl på hur du skapar filen. Är det via en WYSISYG editor så genererar den HTML taggar runt texten som sedan då formateras när du printar den. Skriver du i notepad så kommer allt bara hamna som en lång sträng.
Det du håller på med nu brukar annars gå under serverrendering och då skapar du din HTML på servern och skickar hela dokumentet till browsern, istället för att skicka textsträngar ur en txt fil.

Du skulle kunna ha texten i någon fil eller JSON och sedan skapa HTML strukturen på servern och sedan skicka det dokumentet till clienten.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

hmm ska se hur jag ska gå vidare men tack för tipsen och ideér

Computer: Windows 10, 64-bit, Intel i7 - 8700K, Asus ROG STRIX Z370-F GAMING, 16GB RAM and Asus GTX1080

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Kan någon förklara varför domen ser korrekt ut med formateringen men det som visas har inget radavstånd?

Se bild Här!

Computer: Windows 10, 64-bit, Intel i7 - 8700K, Asus ROG STRIX Z370-F GAMING, 16GB RAM and Asus GTX1080

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av freddehboy:

Kan någon förklara varför domen ser korrekt ut med formateringen men det som visas har inget radavstånd?

Se bild Här!

För att HTML inte bryr sig om radbryt eller whitespace, inte mer än ett mellanslag. Default är att kollapsa all content innanför taggarna, därför klipper den bort whitespaces i början och i slutet av taggen.
Vill du ha radbryt får du specifikt sätta <br> taggar där du vill bryta raden. Eller sätta varje stycke inom en egen paragraph <p>.
Alternativt lägga texten i en wrapper div där du med CSS specificerar hur många tecken det ska vara per rad och sätta en max-width.

Ett annat alternativ är att sätta en klass i CSS som sätter

white-space: pre;

https://jsfiddle.net/vxt7a91d/

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av zaibuf:

För att HTML inte bryr sig om radbryt eller whitespace, inte mer än ett mellanslag. Default är att kollapsa all content innanför taggarna, därför klipper den bort whitespaces i början och i slutet av taggen.
Vill du ha radbryt får du specifikt sätta <br> taggar där du vill bryta raden. Eller sätta varje stycke inom ett en egen paragraph <p>.
Alternativt lägga texten i en wrapper div där du med CSS specificerar hur många tecken det ska vara per rad och sätta en max-width.

Etta annat alternativ är att sätta en klass i CSS som sätter

white-space: pre;

https://jsfiddle.net/vxt7a91d/

Fungerar utmärkt

Tack och må väl

Computer: Windows 10, 64-bit, Intel i7 - 8700K, Asus ROG STRIX Z370-F GAMING, 16GB RAM and Asus GTX1080

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.