?? 問題
描述
作為程序員必備素質-懶，今天又給自己了一個造了個需求：
將CSDN文章自動生成Markdown列表。
也就是把寫過的文章列表，轉成標題+鏈接的列表，如下圖所示：
環(huán)境
| 版本號 | 描述 | |
|---|---|---|
| 文章日期 | 2023-04-14 | |
1?? 分析及編碼
頁面分析
打開控制臺頁面，很容易定位到文章列表，其內部結構如下圖：
我們需要的就是獲取
li標簽列表，將每一項中的標題和鏈接取出來，拼成Markdown文本。
枚舉列表
核心邏輯就是通過
$選擇出所有的li列表。$('.column_article_list li a')。
然后封裝成Array對象，方便使用forEach函數。
function get_article_list() {
var els = $('.column_article_list li a')
return Array.from(els)
}
處理li，獲取Markdown
上一步我們獲取了文章列表，現在我們封裝一個轉換函數，將其中一項轉為Markdown文本。
function convert_markdown(el) {
var title = el.children[0].innerText
var url = el.href
return `- ${title} [${url}](${url})\n`
}
完成功能拼裝
- 遍歷列表
- 處理項
- 拼裝（可以正序和倒敘，或者自定義刪選等）
function get_article_list() {
var els = $('.column_article_list li a')
return Array.from(els)
}
function convert_markdown(el) {
var title = el.children[0].innerText
var url = el.href
return `> - ${title} [${url}](${url})\n`
}
function main() {
var ret = ''
get_article_list().forEach(el => {
// 正序
// ret += convert_markdown(el)
// 倒敘
ret = convert_markdown(el) + ret
})
return ret
}
console.log(main())
2?? 完整代碼及運行結果
完整代碼
function main() {
var ret = ''
get_article_list().forEach(el => {
// 正序
// ret += convert_markdown(el)
// 倒敘
ret = convert_markdown(el) + ret
})
return ret
}
console.log(main())
運行結果
控制臺輸出，整整齊齊！
文章來源：http://www.zghlxwxcb.cn/news/detail-413534.html
?? 總結
Array.from將類數組對象轉為Array- 功能拆分思路，化繁為簡。
ps： 文章中內容僅用于技術交流，請勿用于違規(guī)違法行為。文章來源地址http://www.zghlxwxcb.cn/news/detail-413534.html
到了這里，關于【JS每N日一練】 將CSDN文章自動生成Markdown列表的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
