用 ALT 标记和占位符文本替换所有 HREF URL 属性答案

【问题标题】：Replacing ALL HREF URL attributes with ALT tag and Placeholder Text用 ALT 标记和占位符文本替换所有 HREF URL 属性
【发布时间】：2019-07-10 21:19:56
【问题描述】：

我需要找到一种自动方法来更新 HTML 文件中的 href URL，其中包含锚标记包装的相应图像替代文本，同时还包括前导和结束 RPL 文本。

开始：

<a href="https://www.google.com"><img src="/images/image.jpg" alt="ALT_TEXT"></a>
End:
<a href="${clickthrough('ALT_TEXT')}"><img src="/images/image.jpg" alt="ALT_TEXT"></a>

分解新网址：

第一个变量：${clickthrough('<br>
第二个变量：ALT_TEXT<br>
第三个变量：')}

有谁知道我应该从哪里开始为这个问题设计解决方案？什么编码语言可以处理这个问题？

【问题讨论】：

取决于要求。您想在将 HTML 文件提供给客户端之前执行此操作吗？后？您是否担心正在查看 HTML 文件的用户（可能是在浏览器中）是否关闭了脚本？请阅读How to Ask。

标签： html href alt

【解决方案1】：

您要查找的语言是 JavaScript。

这是一个工作示例，可以执行您提到的操作。（这里有一个codepen 和同样的例子）

const anchorElements = document.querySelectorAll('a');
[...anchorElements].forEach((anchor) => {
  const altText = anchor.querySelector('img').alt;
  anchor.href = "${clickthrough('" + altText + "')}";
})

<a href="https://www.google.com"><img src="https://place-hold.it/300x100" alt="text1"></a>
<a href="https://www.google.com"><img src="https://place-hold.it/300x100" alt="text2"></a>
<a href="https://www.google.com"><img src="https://place-hold.it/300x100" alt="text3"></a>

【讨论】：