chrome控制台通过css获取列表值

在极客时间买了个python课程,想边看边做笔记,需要每节课一个markdown文件,发现每次都手动去拷贝创建文件很麻烦,所以想直接一次性都创建完。下面是创建步骤。

1. 选中元素,鼠标右键Inspect,查看Html,找一下元素特征。如下,发现课程列表都是同一个Css Class Articlepc_txt_3djrl。

chrome控制台通过css获取列表值chrome控制台通过css获取列表值

2. 用这个css选择器,在控制台输入$$(".ArticlePC_txt_3DJrl"),打印出所有元素,发现有47个。

chrome控制台通过css获取列表值

3. 用map和string的replace函数继续处理数组

$$(".ArticlePC_txt_3DJrl").map(x=>"touch "+ (x.innerText).replace(/\s/g,"_").replace(/[?||]/g,"")+".md")
chrome控制台通过css获取列表值

命令说明:

  • map:对数组里的每个元素,执行括号里的操作,返回一个新数组。我这里用了个匿名函数,x=>x.innerText获取到每个元素的innerText属性后,替换特殊字符,首尾拼接字符串。
  • replace:
    • .replace(/\s/g,"_"),把空格替换成下划线
    • .replace(/[?||]/g,""),删掉竖杠和中文问号
  • +: 字符串拼接,首尾拼接 'touch '和'md'

4. 发现非正课如开篇词、建议都被输出来了,决定只保留有数字的课程标题,于是再用filter过滤出含数字的课程,如截图只剩下43个.最终达到效果。

$$(".ArticlePC_txt_3DJrl").map(x=>"touch "+ (x.innerText).replace(/\s/g,"_").replace(/[?||]/g,"")+".md").filter(item => {
			if (new RegExp(/touch\s\d\d*/g).test(JSON.stringify(item)))
				return item;
		})
chrome控制台通过css获取列表值

5. 把最后输出的字符串拷贝到sublime, 把", "替换成换行,删掉首尾的双引号,就能直接拷贝到terminal批量创建所有文件了。

上一篇:innerHTML、innerText、outerHTML、outerText的区别


下一篇:textContent、innerText、innerHTML属性