我愛JS · 10月17日

JS教學-文章縮圖預覽，夢幻連動的腳本教學！

前情提要

常常寫文章的時候都會運用到圖文並茂，
如果可以設定文章的圖片封面就是一個很棒的設計。

今天的JS腳本教學已經夢幻連動！
原本IT幫的文章與codeLove像是平行宇宙，只有偶爾轉載，現在，
教學內容直接來針對codelove來寫一個小小有趣小功能XD

目標設計

今天以codelove這個論壇為例，
讓我們來手動創造一個小腳本：分析文章內容，以正則去匹配圖片網址，
然後透過create的API寫出div，並且監聽事件，
當點擊圖片的時候，把圖片網址放到封面圖片的input欄位。

效果

會根據textArea change的時候來匹配出網址。
並且創建div與img元素去放入網頁。

點圖片後會把圖片網址丟入。

程式碼內容

// 獲取textarea元素
var textarea = document.querySelector("body > div.container.px-0 > div > div.col-12.col-lg-9 > div > div > form > textarea");

var featuredImageInput = document.querySelector('input[name="featured_image"]');
textarea.addEventListener('change', function(event) {

// 檢查是否存在imgBox元素
let imgBoxCheck = document.querySelector('.imgBox');

if (imgBoxCheck) {
  // 如果存在，則刪除imgBox元素
  imgBoxCheck.parentNode.removeChild(imgBoxCheck);
}

// 獲取文本框的內容
var ContentText = textarea.value;

// 創建一個空數組來存儲圖片鏈接
var imgArray = [];

// 使用正則表達式查找圖片鏈接
var urlRegex = /https?:\/\/[^\s/$.?#].[^\s]*/gi; // 匹配以http或https開頭的鏈接

var matches = ContentText.match(urlRegex);

if (matches) {
    // 疊代所有匹配項並篩選出以.png或.jpg結尾的鏈接
    for (var i = 0; i < matches.length; i++) {
        if (matches[i].match(/\.(png|jpg)$/i)) {
            imgArray.push(matches[i]);
        }
    }
}

// 使用正則表達式匹配鏈接部分
var regex = /!\[\]\(([^)]+)\)/g;
var match;

while ((match = regex.exec(ContentText)) !== null) {
  imgArray.push(match[1]);
}

// 創建一個包含圖片的容器div（imgBox）並設置為display: flex
let imgBox = document.createElement('div');
imgBox.className = 'imgBox'; // 添加類名
imgBox.style.display = 'flex';

// 平均分配圖片大小
var imageSize = 100 / imgArray.length; // 假設100%寬度，根據圖片數量計算每張圖片的寬度

// 將圖片鏈接轉換為img元素並插入到imgBox
imgArray.forEach(function (imgUrl) {
    var imgDiv = document.createElement('div');
    var img = document.createElement('img');
    img.src = imgUrl;
    img.className = 'imgCover';
  img.addEventListener('click', function () {
        // 設置name="featured_image"的輸入框的值為被點擊圖片的src屬性
        featuredImageInput.value = img.src;
    });

    // 設置img的寬度為100%
    img.style.width = '100%';
    img.style.height = '100%';
    imgDiv.appendChild(img);
    imgBox.appendChild(imgDiv);
});

// 將imgBox插入到textarea後面
h5.insertAdjacentElement('afterend', imgBox);
textarea.style.overflow = 'auto';
imgBox.style.border="5px solid gray"
imgBox.style.marginTop="5px"

});

// 創建一個包含CSS規則的<style>元素
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = '.imgBox:hover .imgCover:not(:hover) { filter: grayscale(100%); opacity: 0.75; }';

// 將<style>元素添加到<head>中
document.head.appendChild(style);

h5= document.createElement('h5')
h5.innerText='請選擇你的文章縮圖：'
h5.style.marginTop="50px"
h5.style.fontSize="16px"
textarea.insertAdjacentElement('afterend', h5);