Converting single quotes to double quotes inside a title attribute

Question

I have an image title that has a tag with double quotes in it, and I need to convert it to single quotes for use in a photo slideshow. I don't have the option of changing anything other than the attribute name, so I can't escape the quotes inside the value.

Here's my html:

<div  id="image-gallery">
<img alt="Alt Text" src="photo.jpg" title="Title <a href="#link">here</a>" />
</div>

I've tried grabbing the title and using replace to change the double quotes to single quotes, like so:

mystr=string = $("#image-gallery img").attr('title');
mystr=mystr.replace(/\"/g,'\'');

The title still drops off after the first double quote though. Any ideas?

Thanks!

You can't put HTML in attribute text and expect it to work. It won't. The title attribute cannot contain markup, so you'll have to get rid of it anyway. — Pointy, Aug 11 '11 at 22:33
If you want this I'd recommend you use some tooltip library that supports HTML tooltips. Shouldn't be too hard to find. — Halcyon, Aug 11 '11 at 22:34

score 2 · Answer 1 · answered Aug 11 '11 at 22:36

2

When you generate your image, you need to HTML-encode the value. I don't know if you're manually typing in the img tag or generating it through server-side script, but it should look like this instead:

<img alt="Alt Text" src="photo.jpg" 
     title="Title &lt;a href=&quot;#link&quot;&gt;here&lt;/a&gt;" />

answered Aug 11 '11 at 22:36

Jacob

77,566
24
149
228

I'm unfortunately not able to do that at the moment, I don't have the access to change what's being returned. – Aug 11 '11 at 22:41
The markup as you gave it is broken. I doubt it's actually *in the DOM* with the HTML in the `title` attribute. Look at the image in Firebug or similar, and you'll see the problem; I suspect your title was converted to "Title – Jacob Aug 11 '11 at 22:43

score 1 · Answer 2 · answered Aug 11 '11 at 22:34

The HTML is just wrong/illegal. You can't fix it after-the-fact with javascript because the HTML is parsed wrong to begin with so the data is never put in the DOM appropriately. And, you will probably get different results in different browsers because of the illegal HTML.

You will HAVE to fix the source HTML. It can be fixed like this:

<div  id="image-gallery">
<img alt="Alt Text" src="photo.jpg" title='Title <a href="#link">here</a>' />
</div>

or this:

<div  id="image-gallery">
<img alt="Alt Text" src="photo.jpg" title="Title <a href='#link'>here</a>" />
</div>

I'm unsure why you're putting HTML in the title tag in the first place. That is not how it is intended to be used. If you want to generate links from the text in the title tag, you should use JS to do that dynamically, rather that embedding HTML in the title tag from the start.

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

    <html>
    <body>

    <script type="text/javascript">

    document.write(escape("<img src=\"http://www.google.com\" />"));

    </script>

    </body>
    </html>

Answer from JDev Escaping characters in JavaScript single and double quotes

edited May 23 '17 at 12:11

Community

1
1

answered Jun 10 '13 at 19:48

ChelaTheGreat

75
1
8

score 0 · Answer 4 · answered Aug 11 '11 at 22:37

0

If you can't change the double quotes, just use single quotes to wrap the title field:

<img alt="Alt Text" src="photo.jpg" title='Title <a href="#link">here</a>' />

answered Aug 11 '11 at 22:37

codecraftnap

1,553
2
9
9

score 0 · Answer 5 · answered Aug 11 '11 at 22:43

Im sorry to say I don't thinks what you are looking for is possible.

The title attribute already stops at the first quote from the a tag.

In your example:

<div  id="image-gallery">
    <img alt="Alt Text" src="photo.jpg" title="Title <a href="#link">here</a>" />
</div>

The title attribute only contains:

title="Title <a href="

The rest is located as other attributes.

Converting single quotes to double quotes inside a title attribute

5 Answers5