使用jQuery.attr()转义属性值

时间:2012-07-21 09:56:07

标签: javascript jquery html

当使用jQuery更新元素的title属性时,我发现实体(特别是
,这是当前推荐的在title属性中添加换行符的方法)无法正确显示(实体显示为文本,未解析...)。

例如:

<!-- This works fine -->
<div title="foo&#10;bar">baz</div>

但是这个:

<div>baz</div>
<script>
$("div").attr('title', 'foo&#10;bar'); // Escapes the &
</script>

有没有办法让jQuery逃脱价值?我尝试在unescape()之前使用.attr(),但它没有用...

4 个答案:

答案 0 :(得分:16)

jQuery没有逃避任何事情,实际上你的字符串字面上被设置为标题。您可以 只需使用:

$("div").attr('title','foo\nbar')

http://jsfiddle.net/t5DvY/


似乎有很多误解逃避意味着什么。你在做什么是完全没必要的。

只有在角色具有特殊含义并且您希望它没有任何特殊含义的情况下才能进行转义。

例如,在html解析器的眼中,<是特殊的。如果要确保将其视为文字,则必须将其替换为&lt; <。在 html解析器的眼中强调。在javascript中,<在字符串中不是特殊的,因此你可以 做elem.setAttribute("title", '""><b>hi</b>'),这就是你得到的,元素的标题实际上是""><b>hi</b>

对于html代码点引用,它们通常是无用的。您可以简单地使用文字字符。你可以简单地代替写&#x2665;。您可以简单地编写&#x00F6;,而不是撰写ö。这是http://jsfiddle.net/fnqDn/2/

答案 1 :(得分:12)

你是对的; unescape()在这种情况下不起作用。你可以做的是类似于答案here中提到的内容。

基本上,使用jQuery创建一个空元素,将其HTML设置为标题中所需的文本(在本例中为'foo&#10;bar'),然后返回元素的文本。

听起来有点复杂?它是,但这适用于任何HTML实体,它实际上只是一个单行。这是代码:

<div>baz</div>
<script>
    var title = $('<div/>').html('foo&#10;bar').text();
    $("div").attr('title', title);
</script>

或者在一条线上:

$('div').attr('title', $('<div/>').html('foo&#10;bar').text());

答案 2 :(得分:3)

如果您要做很​​多事情,这个功能可以节省您的时间:

function unescp(x){
 return $('<div/>').html(x).text();
}
$("div").attr('title',unescp('foo&#10;bar'));

在此处查看:http://jsfiddle.net/9Lnru/

答案 3 :(得分:0)

您可以尝试将值放入隐藏元素中。然后让jquery将该值复制到div。我不确定它是否会通过jQuery而不被注意,但值得一试...