这段代码旨在解决一个常见的需求：在无法直接编辑 HTML 的情况下，通过 JavaScript 和 jQuery 将页面上特定模式的链接转换为嵌入式视频。核心思路是：找到所有匹配特定 URL 模式的链接，提取这些链接的 href 属性，然后使用这些 href 属性构建包含嵌入式 iframe 的 HTML 代码，最后将原始链接替换为新生成的 iframe。
核心思路
原始代码的问题在于，它尝试使用 $("a[href*=\"https://www.php.cn/link/6f467e9654331d7ad85ed630906ac10b\"]").replaceWith(applicationiFrame); 来替换所有匹配的链接，导致所有链接都被替换为同一个 iframe。正确的做法是在循环中针对 每个 匹配的链接进行替换。
解决方案
立即学习“Java免费学习笔记（深入）”；
以下是改进后的代码，它能够正确地将每个匹配的链接替换为对应的嵌入式视频：
$('a[href*="https://www.php.cn/link/6f467e9654331d7ad85ed630906ac10b"]').each(function(index, item) {
let applicationEmbed = $(item).attr("href");
let applicationiFrame = `
`;
$(item).before(applicationiFrame).remove();
});代码解释
- 选择器： $('a[href*="https://www.php.cn/link/6f467e9654331d7ad85ed630906ac10b"]') 选择所有 href 属性包含 "https://www.php.cn/link/6f467e9654331d7ad85ed630906ac10b" 的 标签。
- .each() 循环： .each() 方法用于遍历所有匹配的元素。 function(index, item) 定义了循环的回调函数，index 是元素的索引，item 是当前的 DOM 元素。
- 获取 href 属性： let applicationEmbed = $(item).attr("href"); 使用 jQuery 的 .attr() 方法获取当前链接的 href 属性，并将其存储在 applicationEmbed 变量中。
- 构建 iframe HTML： 使用模板字符串（template literals）构建包含嵌入式 iframe 的 HTML 代码。 src="${applicationEmbed}/embed" 将之前获取的 href 属性插入到 iframe 的 src 属性中。
- 替换链接： $(item).before(applicationiFrame).remove(); 这行代码是关键。.before(applicationiFrame) 在当前链接 之前 插入新生成的 iframe 代码。.remove() 移除原来的链接。 这样，每个链接都会被替换为对应的 iframe。
示例 HTML
Test link 1
Test link 2
Test link 3
Test link 4
示例 CSS (可选)
.video-embed {
border: 1px solid #666;
background: #dedede;
}这段 CSS 代码只是为了美化嵌入式视频的外观，可以根据实际需要进行修改。
注意事项
- jQuery 依赖： 确保页面已经引入了 jQuery 库。
- URL 模式： 根据实际情况修改选择器中的 URL 模式，以匹配需要替换的链接。
- 安全问题： 注意 iframe 的 src 属性，确保链接是可信的，避免潜在的安全风险。
- 性能： 如果页面上有大量的匹配链接，可能会影响性能。可以考虑使用更高效的选择器或优化循环逻辑。
总结
通过使用 jQuery 的 .each() 方法和字符串拼接，我们可以轻松地将页面上特定模式的链接替换为嵌入式视频。这种方法在无法直接编辑 HTML 的情况下非常有用，可以灵活地修改页面内容。记住，要确保代码的安全性，并根据实际情况进行优化。
