How can i break line html text in Elm - elm

Question

I have a text like this
Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea
and i want to breakline it in Elm with Html tag such as pre or span
and it should show like this
Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 1ea
i have no idea to concat br[][] in string if it is an Elm
but if javascript i can replace string like replace(/\n/g,'<br/>') and it done.

Answer 1

You mentioned a <pre> tag, so let's try that first:
import Html exposing (pre, text)
pre []
[ text "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea" ]
Renders as:
Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 1ea
Or you could split the string into individual lines. String.split accomplishes this:
String.split "\n" "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"
Even better, as kaskelotti aptly suggested:
String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"
Use List.map to transform the Strings into Html and List.intersperse to insert <br /> tags between them:
import Html exposing (br, text)
List.intersperse (br [] [])
(List.map text
(String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea")
)
You end up with a list of Html elements. Done!
See it rendered here.
Or, if you prefer, use an itemized list:
import Html exposing (Html, div, h3, li, text, ul)
listItem : String -> Html msg
listItem content =
li [] [ text content ]
main : Html msg
main =
let
split =
String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"
headline =
Maybe.withDefault "Items:" (List.head split)
items =
Maybe.withDefault [] (List.tail split)
in
div []
[ h3 [] [ text headline ]
, ul [] (List.map listItem items)
]
See it rendered here.

Answer 2

String.replace takes input of type String and returns a String. List.map requires an input as List of Strings i.e. List String as the error states.
You can solve this by using String.split or String.lines. Both will take a String as input and return a List of String, which is what List.map requires.
The difference is that String.lines is a built-in function meant for splitting the String with newline chars (\n) and String.split is a general purpose utility for splitting a String by any delimiter.
For this particular case, I'd go with String.lines, since the name documents its purpose already. Presence of String.split is good to know for future cases.