/    Sign up×
Community /Pin to ProfileBookmark

Storing text in title attribute

Copy linkTweet thisAlerts:
Nov 26.2011

I was having difficulties storing text in the title attribute when it contained special characters. My workaround was to use escape/unescape. Is this the best way to resolve this? Why is it okay to include special characters in the alert function (i.e. Doesn’t work), but not in the title attribute? Thanks

[CODE]var t=’This works because it does not have special characters’;
$(‘body’).append(‘<br /><a id=”a1″ href=”#” title=”‘+t+'”>test</a>’);
alert($(‘#a1’).attr(‘title’));

var t=’This does not works because it “has” special characters”‘;
$(‘body’).append(‘<br /><a id=”a2″ href=”#” title=”‘+t+'”>test</a>’);
alert($(‘#a2’).attr(‘title’));

var t=escape(‘This works because the “special characters” are escaped’);
$(‘body’).append(‘<br /><a id=”a3″ href=”#” title=”‘+t+'”>test</a>’);
alert(“Doesn’t work: “+$(‘#a3’).attr(‘title’));
alert(“Does work: “+unescape($(‘#a3’).attr(‘title’)));
[/CODE]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JunkMaleNov 26.2011 — var t='This does not works because it "has" special characters"';

because you broke the string at this point [COLOR="red"]var t='This does not works because it "[/COLOR] and from this point on[COLOR="Red"] has" special characters"'; [/COLOR]invokes an error.

You ALWAYS have to escape quotes if you want to use same quotes within a string, they need escaping.

[CODE]var x= "You can have "this" in a string";
var y= "You can have 'this' in a string";
var z= "you can't have "this" in a string"; // breaks at "you can't have "
// and...
var a= 'You can have 'this' in a string';
var b= 'You can have "this" in a string';
var c= 'you can't have "this" in a string'; // breaks at 'you can'[/CODE]

Strings present problems when mixing case and can present problems where you have to use ' escaped single quotes in situations where you need the character but a previous use of a single quote can result in a broken script of not careful. This will depend on the opener quote, double or single and how you alternate or escape them.
Copy linkTweet thisAlerts:
@007JulienNov 26.2011 — I do not know what happens with jQuery but there is no problem, with a valid DOCTYPE and a charset, to display a valid string as title.
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Undefined</title>
</head>
<body>
Good luck !
<script type="text/javascript">
var t='It works although it "has" special characters characters like : " or @, # ans so on ...';
document.title=t;
</script>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@NotionCommotionauthorNov 26.2011 — Looks like the title attribute should be set later. All of the following examples work. Slightly off topic, which of the native JavaScript approaches is best to set an attribute?

[CODE]var t='This works because the title with "special characters" were added later.';
var e = document.createElement('a');
e.title=t;
e.id='a4'
e.href='#'
e.appendChild(document.createTextNode("test"));
document.body.appendChild(e);
alert(document.getElementById('a4').title);

var e = document.createElement('a');
e.setAttribute('title', t);
e.setAttribute('id', 'a5');
e.setAttribute('href', '#');
e.appendChild(document.createTextNode("test"));
document.body.appendChild(e);
alert(document.getElementById('a5').title);


//Using jQuery
$('body').append('<a id="a4" href="#" title="">test</a>');
$("#a6").attr("title",t);
alert($('#a6').attr('title'));[/CODE]
×

Success!

Help @NotionCommotion spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...