将原始HTML插入Elm组件

Question

如何将文本 - 我知道'安全' - 直接插入到Elm页面中。

即以下是什么是text'。

let str = "<h1>Hello World</h1>"
in div [] [ text' str ]

在实践中，我可以得到任何有效的HTML，所以我不想构建一个解析器，我宁愿避免使用一个端口，因为DOM可以打破虚拟dom diffing

Answer 1

这个post讨论了一些解决方案。似乎海报使用Markdown.toHtml取得了成功。

Answer 2

要详细说明accepted answer，这对我有用：

安装markdown库

elm-package install evancz/elm-markdown

在div中呈现HTML

import Markdown

div [] [ Markdown.toHtml [] str ]

Answer 3

从Elm 0.19开始，似乎elm-markdown中的漏洞已被插入并正确地逃脱了HTML。

与Elm 0.19一起使用的解决方案是使用hecrj/html-parser解析HTML：

import Html.Parser
import Html.Parser.Util

let
    rawHtml = "<h1>Hello World</h1>"
    innerHtml = case Html.Parser.run rawHtml of
        Ok nodes -> Html.Parser.Util.toVirtualDom nodes
        Err _    -> []
in
    div [] innerHtml

Answer 4

或者只是这个as per：

import Html exposing (div)
import Html.Attributes exposing (property)
import Json.Encode exposing (string)

main = 
  div [ property  "innerHTML" <| string "<div>hello</div>"  ] []