如何使用elm-html模块获取特殊字符?

问题描述 投票:13回答:5

免责声明:我对榆树来说是全新的

我正在摆弄在线Elm编辑器,我遇到了一个问题。我找不到让某些特殊字符(版权,商标等)出现的方法。我试过了:

import Html exposing (text)

main =
  text "©"

所有出现的都是实际文本©。我也尝试使用unicode字符为它\u00A9但最终给我一个语法错误:

(line 1, column 16): unexpected "u" expecting space, "&" or escape code

我发现的唯一方法是实际访问某人的网站并将其版权符号复制/粘贴到我的应用中:

import Html exposing (text)

main =
  text "©"

这是有效的,但我宁愿能够快速输入这些字符,而不必寻找其他网站上的实际符号。在Elm中返回HTML时是否有首选/推荐的获取非转义文本的方法?

编辑:

专门针对Mac:

  • 选项+ g给你©
  • 选项+ 2给你
  • 选项+ r给你®

所有测试都在在线编辑器中进行了测试。这仍然不会攻击核心问题,但对于这些特定的特殊字符来说,这只是一件好事。

elm
5个回答
17
投票

为什么这(故意)不那么容易

榆树的“制造者”可以理解地不愿意给我们一种在HTML文本中插入“特殊”字符的方法。两个主要原因:

  1. 这将打开一个“文本注入”漏洞,恶意用户可以将任何HTML标记(甚至JavaScript代码)插入到网页中。想象一下,如果你能在像Stack Overflow这样的论坛网站上做到这一点:你可以欺骗任何阅读你贡献的人在你的浏览器中执行你选择的代码。
  2. Elm努力工作以产生最佳的DOM更新。这仅适用于Elm知道的标记内容,而不适用于恰好包含标记的文本。当人们在Elm程序中插入包含HTML标签的文本时,最终会成为无法优化的DOM的一部分。

反正怎么可能

也就是说,Elm用户社区发现了一个提供解决方法的漏洞。由于上述原因,不建议使用,特别是如果您的文本不是常量,即来自程序外部的来源。尽管如此,人们仍然希望这样做,所以我要记录它以拯救其他人我在挖掘所有东西并让它工作的麻烦:

  1. 如果你还没有, import Json.Encode exposing (string) 这是在包elm-lang/core所以它应该已经在你的依赖项中。
  2. 同样的, import Html.Attributes exposing (property)
  3. 最后,创建一个标签,其中包含property "innerHTML"和文本的JSON-Value表示,例如: span [ property "innerHTML" (string " ") ] []

9
投票

我发现,有一个更好的解决方案:你可以将特殊字符从Unicode转换为char,然后从char创建一个字符串:

resString = String.fromChar (Char.fromCode 187)

7
投票

您可以直接在Elm字符串和字符中使用unicode转义码:

我们有一个包含所有特殊字符的util模块,如:

module Utils.SpecialChars exposing (noBreakSpace)

noBreakSpace : Char
noBreakSpace = '\x00A0'

哪个可以用作:

let
  emptyLabel = String.fromChar noBreakSpace
in
label []
    [ span [ ] [ text emptyLabel ]
    ]

这将呈现<span>&nbsp;</span>


3
投票

我最近创建了一个解决这个问题的Elm package。如果你使用text' "&copy;"它将呈现版权符号©而不是转义码。也适用于"&#169;""&#x000A9;"。希望这可以帮助!


2
投票

你不需要搜索符号,你可以从像this one这样的列表中获取它们。

如果复制和粘贴太麻烦,你也可以创建一个帮助函数,你可以使用你的转义字符,如下所示:

import Html exposing (..) 
import String

htmlDecode str = 
  let 
    replace (s1, s2) src= String.join s2 <| String.split s1 src    
    chrmap = 
      [ ("&reg;", "®")
      , ("&copy;", "©" )
      ] 
  in  
    List.foldl replace str chrmap

main = text <| htmlDecode "hello &copy;" 
© www.soinside.com 2019 - 2024. All rights reserved.