如何在Elm中折断HTML文本行

Question

我有这样一段文本：

特殊菜单：\n法式炸薯条 1份\n汉堡包 2份\n肉丸 1份

我想在 Elm 中使用 HTML 标签（比如 pre 或 span）将其换行，使其呈现如下效果：

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

如果是 Elm 语言，我不知道如何将 br[][] 连接成字符串。但是在 JavaScript 中，我可以使用类似于 replace(/\n/g,'<br/>') 的字符串替换方法来实现。

- Earn Asdsa

---

当前的输出是什么？ - Ravi

我写了一段代码，像这样：div [] (List.map (\s -> span [] [ text s , br [] [] ] ) (String.replace "\n" text) )但是我遇到了错误。这个replace调用产生的类型是：#String -> String#但是map需要第二个参数是：#List String# - Earn Asdsa

String.replace接受一个字符串类型的输入并返回一个字符串。 List.map需要作为输入的是一个字符串列表，即错误信息中所述的List String。也许你可以使用String.split代替replace？这将删除换行符并返回一个字符串列表。编辑：String.lines已经在换行符上断开字符串并返回一个字符串列表，最好使用它。 - kaskelotti

@kaskelotti，你应该把它变成一个正式的答案。 - glennsl

Answer 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元素列表。完成！

在此处查看其渲染效果（链接）。

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

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

点击此处查看渲染后的效果。

- O.O.Balance

Answer 2

String.replace接受一个字符串作为输入并返回一个字符串。正如错误所述，“List.map”需要一个字符串列表作为输入，即“List String”。

您可以通过使用String.split或String.lines来解决此问题。这两个函数都接受一个字符串作为输入，并返回一个字符串列表，这正是List.map所需的。

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

对于这种特定情况，我会选择String.lines，因为它的名称已经说明了其目的。将来有类似情况时，知道String.split的存在也很好。

- kaskelotti