Question

我有以下HTML：

<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>

现在，我想要使用src替换<li>代码中不在<img>代码中的所有InnerHTML。有了这个，我的输出将是：

<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

未经测试，但这是一个可能为你做的正则表达式...

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

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

更新：经过测试，它适用于您的示例。

如果你想使用Javascript在客户端运行它（出于任何不好的原因），你可以这样做：

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

Answer 2

不是答案，但这不是一种非常语义的做事方式。这是从哪里来的？为什么li元素上有src？

假设你想要一个javascript选项，你可以使用像jquery这样的东西：

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

Answer 3

您很可能使用与src属性匹配的RegEx替换并执行转换。我发现即使没有匹配也要添加title属性，这也应该是可能的。

我会尝试为此挖掘一些RegEx示例。

Answer 4

如果您需要这样做一次不会找到并替换工作？

否则我同意正则表达式是最好的选择。

在LI Tag中将SRC属性替换为TITLE

4 个答案: