我如何在Elm中换行html文本

Question

我有这样的文字

Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea

我想用诸如pre或的Html标签在Elm中对它进行换行，span 它应该像这样显示

Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 1ea

br[][]如果它是Elm，我不知道在字符串中连接，但是如果javascript，我可以替换字符串replace(/\n/g,'<br/>')并完成。

Answer 1

您提到了一个<pre>标记，所以让我们先尝试一下：

import Html exposing (pre, text)

pre []
    [ text "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea" ]

呈现为：

import Html exposing (pre, text)

pre []
    [ text "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea" ]

或者，您可以将字符串分成几行。String.split完成此任务：

String.split "\n" "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"

正如kaskelotti恰当地建议的那样：

String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"

使用List.map改造字符串转换成HTML，并List.intersperse插入<br />它们之间标签：

import Html exposing (br, text)
List.intersperse (br [] [])
        (List.map text
            (String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea")
        )

您最终得到了HTML元素列表。做完了！

看到它呈现在这里。

或者，如果您愿意，请使用逐项列出：

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)
        ]

看到它呈现在这里。