将 SRC 属性替换为 LI 标记中的 TITLE答案

【问题标题】：Replace SRC attribute with TITLE in LI Tag将 SRC 属性替换为 LI 标记中的 TITLE
【发布时间】：2010-09-18 13:42:50
【问题描述】：

我有下面给出的 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>

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

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

【问题讨论】：

那么通过单击<li> 元素，您想用<li> 的title 属性值更改嵌套的<img> src？
不，我想他想改变他的输出，所以 LI 的“src”属性现在是一个“title”属性。
no 我在
中有一个 src 属性（请检查第一个 html），我只想将所有 src 属性替换为“title”（请检查第二个 html）

【解决方案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>'
);

【讨论】：

你能用innerHTML给出这个解决方案吗

【解决方案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");
    });
});

【讨论】：

是否可以使用innerHTML，使用正则表达式
在浏览器中？您仍然需要运行某种 javascript。你为什么要关闭这个解决方案？这是作业题吗？
基本上我需要在页面运行时将这个“src”更改为“title”
好吧，我那里的代码可以做到这一点。您可以托管 jquery 库，或在jqueryjs.googlecode.com/files/jquery-1.2.6.min.js 链接到缩小版本。然后只需将上面的代码放入脚本标签中即可。
你还没有回答为什么你在li标签上有一个src属性的问题？为什么不首先创建正确的 HTML？

【解决方案3】：

您很可能使用与 src 属性匹配的 RegEx 替换并进行转换。我看到即使没有匹配项，您也想添加 title 属性，这也应该是可能的。

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

【讨论】：

【解决方案4】：

如果你需要这样做一次会不会只是查找和替换工作？

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

【讨论】：