jQuery replace certain characters in img title attribute

Question

I have an img title attribute that contains the following set of characters: <h1>Image ABC</h1><p>There ist another paragraph</p> (the html tags are neccessary to achieve a certain formatting as the title also serves as the caption of the image, this is a restriction of the CMS)

How can I remove certain characters in the img title attribute using jQuery (especially the html tags)? For example I want to remove everything in the title attribute except Image ABC

Thanks a lot for your ideas!

What decides what to keep? You can replace the parent container's content with the <h1></h1> if you wish — mplungjan
– mplungjan, Commented Dec 22, 2014 at 12:39
What do you want to get rid of - just all HTML tags and their content? And what have you tried? — Alex Walker
– Alex Walker, Commented Dec 22, 2014 at 12:41
I tried $("img").prop("title").replace("<h1>", ""); but doesn't work. But the example from @mplungjan worked — fono
– fono, Commented Dec 22, 2014 at 13:29

mplungjan · Accepted Answer · 2014-12-22 16:41:32Z

0

If you mean the title attribute, try this

$(function() {
  $("img[title^='<h1']").each(function() {
    var title = this.title;
    $(this).prop("title",title.substring(0,title.indexOf('</h1>')+5));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img title="<h1>This will stay</h1><p>This will go</p>" src="http://lorempixel.com/output/abstract-q-c-164-153-6.jpg" />

Or better (no need for parseHTML by the way, as long as we .append or .html it to a tag first)

$(function() {
  $("img[title^='<h1']").each(function() {
    var $title = $('<div/>').html(this.title);
    $(this).prop("title",$title.find('h1').html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img title="<h1>This will stay</h1><p>This will go</p>" src="http://lorempixel.com/output/abstract-q-c-164-153-6.jpg" />

If you meant an actual title you can do

$(function() {
  $(".title").each(function() {
    $(this).html('<h1>'+$(this).find("h1").html()+'</h1>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="title"><h1>Image ABC</h1><p>There ist another paragraph</p></div>

edited Dec 22, 2014 at 16:41

answered Dec 22, 2014 at 12:41

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Girish Over a year ago

op is asking for <img title=""> attribute

fono Over a year ago

Thanks a lot @mplungjan. Your first approach was exactly what I needed. Did a small modification and now it gives me the desired output:

$(function() {   $("img[title^='<h1']").each(function() {     var title = this.title;     $(this).prop("title",title.substring(4,title.indexOf('<\/h1>')));    }); });

mplungjan Over a year ago

See second example for the H1 content

Rohan Kumar · Accepted Answer · 2014-12-22 12:58:27Z

0

Try this,

HTML

<img title="<h1>Image ABC</h1><p>There ist another paragraph</p>" src=""/>

SCRIPT

 var $img=$('img');
 var $t=$.parseHTML($img.attr('title'));
 // you need to append your title string to output element
 // source http://stackoverflow.com/a/15403888/1817690
 $img.attr('title',$('h1', $('<output>').append($t)).text());

 var $img=$('img');
 var $t=$.parseHTML($img.attr('title'));
 $img.attr('title',$('h1', $('<output>').append($t)).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img title="<h1>Image ABC</h1><p>There ist another paragraph</p>" src=""/>

answered Dec 22, 2014 at 12:58

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

5 Comments

mplungjan Over a year ago

Clever. I have not seen parseHTML before. Is there an actual reason to use it?$('<output>').append($img.prop("title")) should get the same, no?

mplungjan Over a year ago

I would want to test that.

mplungjan Over a year ago

This worked for me without parseHTML: var $title = $('<div/>').html(this.title);

Rohan Kumar Over a year ago

But you need a div element now, you have to use that div to get h1 text which may affect the DOM and in my case I used a dummy element output which has only significance to get the h1 element from the title string without affecting DOM.

mplungjan Over a year ago

I fully expect var $title = $('<dummy/>').html(this.title); to work too

Mike · Accepted Answer · 2014-12-22 12:44:48Z

-1

You can replace some specific words with the replace function of Javascript:

var $data = "<h1>Image ABC</h1>";
$data.replace("ABC","");

Maybe if your tags dont have ids or unique identifier you cann use .each

$(function() {
  $(".title").each(function() {
    $(this).html('<h1>'+$(this).find("h1").html()+'</h1>');
  });
});

answered Dec 22, 2014 at 12:44

Mike

7811 gold badge6 silver badges18 bronze badges

1 Comment

fono Over a year ago

Thx, @Mike, for your idea. I went with the solution from mplungjan.

Collectives™ on Stack Overflow

jQuery replace certain characters in img title attribute

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related