如何在 Elm 中换行 html 文本

Question

我有这样的文字

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

我想在 Elm 中使用 Html 标记将其换行，例如 pre 或 span 它应该像这样显示

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

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

Answer 1

String.replace 接受字符串类型的输入，return 是一个字符串。 List.map 需要输入作为字符串列表，即作为错误状态的列表字符串。

您可以使用 String.split 或 String.lines 解决此问题。两者都将一个字符串作为输入，return 一个字符串列表，这是 List.map 所要求的。

不同之处在于 String.lines 是一个内置函数，用于用换行符 (\n) 拆分字符串，而 String.split 是一个通用实用程序，用于按任何分隔符拆分字符串.

对于这种特殊情况，我会选择 String.lines，因为名称已经说明了它的用途。 String.split 的存在对于未来的案例来说是个好消息。

Answer 2

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

import Html exposing (pre, text)

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

呈现为：

Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 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 个元素的列表。完成！

查看渲染结果 here。

或者，如果您愿意，可以使用逐项列表：

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

查看渲染结果 here。

如何在 Elm 中换行 html 文本

How can i break line html text in Elm

elm