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
if you wish — mplungjan, Dec 22 '14 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, Dec 22 '14 at 12:41
I tried $("img").prop("title").replace("
", ""); but doesn't work. But the example from @mplungjan worked — fono, Dec 22 '14 at 13:29

mplungjan · Accepted Answer · 2014-12-22T16:41:32.643

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>

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^='
'))); }); });` — fono, Dec 22 '14 at 13:30

score 0 · Answer 2 · answered Dec 22 '14 at 12:58

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 '14 at 12:58

Rohan Kumar

40,431
11
76
106

Clever. I have not seen parseHTML before. Is there an actual reason to use it?`$('').append($img.prop("title"))` should get the same, no? – mplungjan Dec 22 '14 at 13:02
I would want to test that. – mplungjan Dec 22 '14 at 13:05
This worked for me without parseHTML: `var $title = $('
').html(this.title);` – mplungjan Dec 22 '14 at 16:42
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. – Rohan Kumar Dec 23 '14 at 04:38
I fully expect `var $title = $('').html(this.title);` to work too – mplungjan Dec 23 '14 at 06:35

score -1 · Answer 3 · answered Dec 22 '14 at 12:44

-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 '14 at 12:44

Mike

751
1
6
17

Thx, @Mike, for your idea. I went with the solution from mplungjan. – fono Dec 22 '14 at 13:36

jQuery replace certain characters in img title attribute

", ""); but doesn't work. But the example from @mplungjan worked

3 Answers3

'))); }); });`