CSS 内容中的 HTML 实体（在运行时将实体转换为转义字符串）答案

【问题标题】：HTML entities in CSS content (convert entities to escape-string at runtime)CSS 内容中的 HTML 实体（在运行时将实体转换为转义字符串）
【发布时间】：2014-09-08 08:53:19
【问题描述】：

我知道像 &nbsp; 或 &#246; 或 &#x0F0; 这样的 html 实体不能在这样的 css 中使用：

div.test:before {
    content:"text with html-entities like `&nbsp;` or `&#246;` or `&#x0F0;`";
}

有一个很好的问题和很好的答案来解决这个问题：Adding HTML entities using CSS content

但我正在读取通过 AJAX 从服务器放入 css-content 的字符串。在用户客户端运行的 JavaScript 接收嵌入了 html-entities 的文本并从中创建样式内容，而不是将其作为文本元素放入 html 元素的内容中。此方法有助于防止试图通过复制和粘贴窃取我的内容的小偷。不属于 html 文档（但属于 css 内容）的文本真的很难复制。这种方法效果很好。那个 html 实体只有这个讨厌的问题。

所以我需要在运行时将 html-entities 转换为 unicode 转义序列。我可以使用 perl 脚本在服务器上或使用 JavaScript 在客户端上执行此操作，但我不想编写包含所有现有命名实体的完整列表的子例程。 html5 中有超过 2200 个命名实体，如下所示：http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html 而且我不想每次更改此列表时都更改我的子程序。（数字实体没问题。）

有什么技巧可以用 javascript 进行这种转换吗？也许通过向 DOM 添加、读取和删除内容？（我正在使用 jQuery）

【问题讨论】：

人们仍然可以访问您的内容。一旦你将它发送到某人的浏览器，它就不再是你的控制了。
任何人都可以通过 Firebug 或 Chrome 开发者控制台获得它。这只会限制无辜的访客。
@Pointy & JanDaniel：是的，我知道，没有绝对完美的复制保护。我没有写“无法复制”。我写道：“真的很难复制”。您需要一些大多数用户不具备的技术技能。但是我的问题不是我的防复制方法的效率。这是一种使用 Javascript（或 Perl）将 html-entities 转换为 unicode-escape-sequences 的简单方法。
如果您对某个问题投了反对票，请发表评论，让发帖者知道您为什么反对该问题。

标签： javascript css dom html-entities css-content

【解决方案1】：

我找到了解决办法：

var text = 'Text&nbsp;that&nbsp;contains&nbsp;html-entities';
var myDiv = document.createElement('div');
$(myDiv).html(text);
text = $(myDiv).text();
$('#id_of_a_style-element').html('#id_of_the_protected_div:before{content:"' + text + '"}');

写这个问题是得到这个答案的一半。我希望这个答案也对其他人有所帮助。

【讨论】：

如果您对某个答案投了反对票，请发表评论，让发帖人知道您为什么反对。