CSS内容中的HTML实体(在运行时将实体转换为转义字符串)



我知道像 öð这样的html实体不能在这样的css中使用:

div.test:before {
    content:"text with html-entities like ` ` or `ö` or `ð`";
} 

有一个很好的问题和很好的答案来处理这个问题:使用CSS内容添加HTML实体

但是我正在通过AJAX从服务器读取放入css内容的字符串。运行在用户客户机上的JavaScript接收带有嵌入式html-实体的文本,并从中创建样式内容,而不是将其作为文本元素放入html-元素的内容中。这种方法有助于防止窃贼试图通过复制粘贴窃取我的内容。不属于html文档(但属于css内容)的文本确实很难复制。这种方法很有效。html-entities只有一个讨厌的问题。

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

是否有任何技巧来执行这种转换与javascript?也许是通过向DOM添加、读取和删除内容?(我使用jQuery)

我找到了一个解决方案:

var text = 'Text that contains 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 + '"}');

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

最新更新