常常寫文章的時候都會運用到圖文並茂，
如果可以設定文章的圖片封面就是一個很棒的設計。
今天以codelove這個論壇為例，
讓我們來手動創造一個小腳本：分析文章內容，以正則去匹配圖片網址，
然後透過create的API寫出div，並且監聽事件，
當點擊圖片的時候，把圖片網址放到封面圖片的input欄位。
會根據textArea change的時候來匹配出網址。
並且創建div與img元素去放入網頁。
點圖片後會把圖片網址丟入。
Oo_花之舞__oO
// 獲取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);
這次的腳本內容其實沒有太多新的知識點，算是一個很好的複習。
querySelector
addEventListener
insertAdjacentElement
forEach
以及正則表達式的使用。
網頁上的功能，其實就是這些基礎的運用配合起來！(°ཀ°)
所以不用擔心前端沒有東西練習，其實點子四處都有，練習也都很實用。
而不是每次都在重複輪迴相同的東西、感到疲倦！
這次的前端小試身手就帶來一個回鍋菜，下次敬請期待更有趣的變化。
喜歡記得追蹤或留言唷。
還沒挑戰過此系列其他內容的，可以試著去挑戰看看◑ω◐
iThome鐵人賽
看影片追技術