How can i break line html text in 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.