用户投稿目录
前端小试身手(1)--帮「发问/发文页」新增"编辑"钮～
前端小试身手(2)--it帮跳转到最佳解答
前端小试身手(3)--增添系列文目录
前端小试身手(4)--it帮发文「一眼全览」
前端小试身手(5)-备份it帮的发问！
前端小试身手(6)--IMG複製大师，懒人专用小脚本
前端小试身手(7)--迷片静音神队友，让你尴尬不再有！
前端小试身手(8)--教你写出「思想审查警卫」，过滤垃圾杂讯的利器！
前端小试身手(9)--文章缩图预览(以codeLove论坛为例)
前情提要
常常写文章的时候都会运用到图文并茂，
如果可以设定文章的图片封面就是一个很棒的设计。
目标设计
今天以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: flexlet imgBox = document.createElement('div');imgBox.className = 'imgBox'; // 添加类名imgBox.style.display = 'flex';// 平均分配图片大小var imageSize = 100 / imgArray.length; // 假设100%宽度，根据图片数量计算每张图片的宽度// 将图片链接转换为img元素并插入到imgBoximgArray.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
以及正则表达式的使用。
心得后记
网页上的功能，其实就是这些基础的运用配合起来！(°ཀ°)
所以不用担心前端没有东西练习，其实点子四处都有，练习也都很实用。
而不是每次都在重複轮迴相同的东西、感到疲倦！
这次的前端小试身手就带来一个回锅菜，下次敬请期待更有趣的变化。
喜欢记得追蹤或留言唷。
还没挑战过此系列其他内容的，可以试着去挑战看看◑ω◐
微信扫一扫打赏
支付宝扫一扫打赏
