JS小应用：从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板

问题产生

自己做站长，为了节省银子，难免要用到图床。有的图床可以直接给你URL，这当然是最好的情况：

而有的图床，却禁用了鼠标右键，甚至复制一张图片地址的机会都不给（偏偏它其他的功能还挺好，你又舍不得放弃它），它给的：

这时候就比较烦了。所以，我自己写了一段js来把自己解放出来。

需求功能

它实现下面几个功能：

1. 从HTML代码中提取到IMG的URL；
2. 把上一步获得的IMG的URL直接封成img标签；
3. 获得图片；
4. 把图片批量复制到剪贴板。

这样，在网页后台编辑文件时候，我就可以点几下鼠标，最后按下ctrl+v，就完成图片批量插入到文章里了。。。

解决问题

HTMl结构

<div class="container"><h1>从HTML代码中提取IMG地址并逐行输出</h1><textarea id="Input" rows="6" cols="50" placeholder="把你的图床链接粘帖在这里..."></textarea>    <button class="base" onclick="extractImgUrls()">提取图片URLs</button><button class="base" onclick="cleardiv('Input')" >清空HTML</button><textarea id="output" cols="200" rows="5"> 提取后的IMG URLs 会显示在这里         </textarea>            <button class="base" onclick="copyDivContentToClipboard('output');">复制URLs</button><button class="base" onclick="cleardiv('output')" >清空URLs</button><button class="base" onclick="insertimg()">获得图片</button>    <button class="base" onclick="copyDivContentToClipboard('inserted-images')">复制图片</button><button class="base" onclick="cleardiv('inserted-images')" >清空图片</button><div id="inserted-images"></div>
</div>

JS代码

// 提取IMG的URLs
function extractImgUrls() {var htmlInput = document.getElementById('Input').value;var imgTags = htmlInput.match(/<img\s+[^>]*src="([^"]*)"/gi);var imgSrcs = [];if (imgTags) {imgTags.forEach(function(tag) {var srcMatch = tag.match(/src="([^"]*)"/);if (srcMatch) {imgSrcs.push(srcMatch[1]);}});}var outputDiv = document.getElementById('output');outputDiv.value = ''; // 清空现有内容imgSrcs.forEach(function(src, index) { var imgLine = src + '\n';outputDiv.value += imgLine;});if (imgSrcs.length === 0) {outputDiv.value = '没有找到IMG地址 (⊙︿⊙)';}
}// 获得图片标签，形如 <img src='' />,并将图片输出到指定div中function insertimg() {  event.preventDefault();var urls = document.getElementById("output").value.split("\n");var insertedImagesDiv = document.getElementById("inserted-images");     urls.forEach(function(url) {var img = document.createElement("img");img.src = url;       insertedImagesDiv.appendChild(img);});
}// 清除指定元素的值
function cleardiv(targetId){var target = document.getElementById(targetId);target.innerHTML = ""; target.value = ""; 
}// 复制xxx到粘贴板
function copyDivContentToClipboard(divId) {// 获取div元素var div = document.getElementById(divId);if (!div) {return;}// 创建一个新的临时div来持有要复制的内容var tempDiv = document.createElement("div");tempDiv.style.position = "absolute";tempDiv.style.left = "-10000px";tempDiv.appendChild(div.cloneNode(true));document.body.appendChild(tempDiv);// 选中内容var selection = window.getSelection();var range = document.createRange();range.selectNodeContents(tempDiv);selection.removeAllRanges();selection.addRange(range);// 复制到剪贴板var successful = false;try {successful = document.execCommand('copy');} catch (err) {alert('Oops, unable to copy');}// 移除临时divdocument.body.removeChild(tempDiv);if (successful) {alert('已复制到剪贴板');}
}

代码比较简陋，但够用就好，有更好的建议的同学，欢迎给我留言啊~~。本例，就在本地用，没有考虑到乱七八糟的输入测试，也不知道有没有人需要。反正，我自己是很需要的。我把代码放在下载区了，不想自己复制又有需要的朋友，可以点这里下载：从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板