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

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');
    }

    // 移除临时div
    document.body.removeChild(tempDiv);
    if (successful) {
        alert('已复制到剪贴板');
    }
}

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