Replace SRC attribute with TITLE in LI Tag

Question

Hi,

I have the html given below:

<ul id="thumbsPhotos">
     <li src="/images/1alvaston-hall-relaxing-lg.jpg"  onclick="updatePhoto (this.title)"><img src="/images/1alvaston-hall-relaxing-sl.jpg"  width="56" height="56"></li>
     <li onclick="updatePhoto(this.title)" src=""><img src="" width="56"  height="56"></li>
     <li onclick="updatePhoto(this.title)" src=""><img src="" width="56"  height="56"></li>
</ul>

Now, I want to replace all the "src" in <li> tags not in <img> tags using InnerHTML. I mean my output will be this:

<ul id="thumbsPhotos">
     <li title="/images/1alvaston-hall-relaxing-lg.jpg"  onclick="updatePhoto(this.title)"><img src="/images/1alvaston-hall-relaxing-sl.jpg"  width="56" height="56"></li>
     <li onclick="updatePhoto(this.title)" title=""><img src="" width="56" height="56"></li>
     <li onclick="updatePhoto(this.title)" title=""><img src="" width="56" height="56"></li>
</ul>

Answer 1

You could most likely use a RegEx replace that matches on the src attribute and do the conversion. I see that you want to also add the title attribute even if there is no match, that should be possible as well.

I'll try to dig up some RegEx examples for this.

Answer 2

Not an answer, but that is not a very semantic way to do things. Where is this coming from? Why is there ever a src on the li element?

Assuming you want a javascript option, you could use something like jquery to do:

$(document).ready(function() {
    $("li[src], li[src='']").each(function() {
        var li = $(this);
        li.attr("title", li.attr("src"));
        li.removeAttr("src");
    });
});

Answer 3

Not tested, but here's a regex which might do it for you...

// find:
<li ([^>]*)src="(.*?)"(.*?)>

// replace:
<li $1title="$2"$3>

Update: tested and it works on your example.

If you wanted to run this on the client side using Javascript (for whatever whacky reason), you could do this:

var ul = document.getElementById("thumbsPhotos");
ul.innerHTML = ul.innerHTML.replace(
    /<li ([^>]*)src="(.*?)"(.*?)>/g,
    '<li $1title="$2"$3>'
);

Answer 4

If you need to do this once wouldn't just find and replace work?

Otherwise I agree that a regex is the best option.