如何在 Elm 中换行 html 文本答案

【问题标题】：How can i break line html text in Elm如何在 Elm 中换行 html 文本
【发布时间】：2019-08-20 06:49:53
【问题描述】：

我有这样的文字

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/>') 之类的字符串，它就完成了。

【问题讨论】：

当前输出是多少？
我写了一个类似``` div [] (List.map (\s -> span [] [ text s , br [] [] ] ) (String.replace "\n" text) ) ``` 但我有错误这个replace 调用产生：#String -> String# 但是map 需要第二个参数是：#List String#
String.replace 接受字符串类型的输入并返回一个字符串。 List.map 需要输入作为字符串列表，即列表字符串作为错误状态。而不是替换，也许你可以使用String.split？这将删除换行符并返回一个字符串列表。编辑：String.lines 已经打破了换行符上的字符串并返回一个字符串列表，最好使用它。
@kaskelotti 你应该做出正确的回答。

标签： elm

【解决方案1】：

您提到了<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。

【讨论】：

【解决方案2】：

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

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

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

对于这种特殊情况，我会选择String.lines，因为该名称已经记录了它的用途。 String.split 的存在对于未来的案例来说很重要。

【讨论】：