ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-07-28 15:33:57  阅读:298  来源: 互联网

标签:map chrome replace item innerText touch 控制台 txt css


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

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

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

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

$$(".ArticlePC_txt_3DJrl").map(x=>"touch "+ (x.innerText).replace(/\s/g,"_").replace(/[?||]/g,"")+".md")

命令说明:

  • 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;
		})

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

标签:map,chrome,replace,item,innerText,touch,控制台,txt,css
来源: https://www.cnblogs.com/stxz/p/15070566.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有