# 提取链接加 a 标签
let content = ''
const reg = /((http|ftp|https):\/\/)?[\w\-_]+(\.[\w\-_]+)+([\w\-\\.,@?^=%&:/~\\+#]*[\w\-\\@?^=%&/~\\+#])?/g
content.replace(reg, (a) => {
if (!a.indexOf('http')) {
return '<a class="pl-5 pr-5" href="' + a + '" target=_blank>' + a + '</a>'
} else {
return '<a class="pl-5 pr-5" href="http://' + a + '" target=_blank>' + a + '</a>'
}
})
# 违禁词检测
const FastScanner = require('fastscan')
let words = allBannedWord.words.split(',')
words = Array.from(new Set(words))
const scanner = new FastScanner(words)
let html = await page.content()
html = html.replace(/\r|\n/ig, '').replace(/<style.*?>.*?<\/style>/ig, '').replace(/<script.*?>.*?<\/script>/ig, '').replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
const _hits = scanner.hits(html)
arr = words.filter(el => Object.keys(_hits).findIndex(e => e === el) > -1)
.map(el => {
return {
kw: el,
count: _hits[el]
}
})
# 用正则匹配任意链接过滤出顶级域名
const urls = [
"http://domain.com/",
"http://www.domain.com/",
"http://abc.domain.com/",
"http://ab-c.123.domain.com/",
"http://www.domain.com/1.html"
];
urls.map(s => {
return s.match(/([^\.\/]+\.[^\.\/]+)\//)[1];
}).forEach(s => console.log(s));
# 本地存储
var str = JSON.stringify(obj); // json 转 字符串
obj = JSON.parse(str); //字符串转 json
sessionStorage.setItem("name", res.data.name); //存
sessionStorage.getItem("name", res.data.name); // 取
// 存储设置时间
export const setLocalStorage = (key, value) => {
const valueDate = JSON.stringify({
val: value,
timer: parseInt(new Date().getTime() / 1000)
})
localStorage.setItem(key, valueDate)
}
// 超时无法取值
export const getLocalStorage = (key, hour = 4) => {
const exp = localStorage.getItem('ext_second') || 60 * 60 * hour
let newValue = ''
if (localStorage.getItem(key)) {
try {
let dataObj = JSON.parse(localStorage.getItem(key))
if ((parseInt(new Date().getTime() / 1000) - dataObj.timer) > Number(exp)) {
localStorage.removeItem(key)
} else {
newValue = dataObj.val
}
} catch (err) {
newValue = localStorage.getItem(key)
}
}
return newValue
}
# 求百分比
export const getPercent = (num, total) => {
num = parseFloat(num)
total = parseFloat(total)
if (isNaN(num) || isNaN(total)) {
return '0%'
}
return total <= 0 ? '0%' : (Math.round(num / total * 10000) / 100 + '%')
}
# 分行获取数组
export const textareaSplit = (val) => {
const keywords = val.split(/[(\r\n)\r\n]+/)
let arr = []
for (let i = 0; i < keywords.length; i++) {
let keyword = keywords[i].replace(/(^\s*)|(\s*$)/g, '')
if (keyword) {
arr.push(keyword)
}
}
return arr
}
# 格式化文件大小
export const renderSize = (value) => {
if (value == null || value == '') {
return '0 KB'
}
const unitArr = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
let index = 0; let srcsize = parseFloat(value)
index = Math.floor(Math.log(srcsize) / Math.log(1024))
let size = srcsize / Math.pow(1024, index)
// 保留的小数位数
size = size.toFixed(0)
return size + ' ' + unitArr[index]
}
# 获取随机字符串
export const randomString = (len = 8) => {
let charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
let randomString = ''
for (let i = 0; i < len; i++) {
let randomPoz = Math.floor(Math.random() * charSet.length)
randomString += charSet.substring(randomPoz, randomPoz + 1)
}
return randomString
}
# 金额按千位逗号分割
export const formatMoney = (s, type) => {
// eslint-disable-next-line no-useless-escape
if (/[^0-9\.]/.test(s)) { return '0' }
if (s == null || s == '') { return '0' }
s = s.toString().replace(/^(\d*)$/, '$1.')
s = (s + '00').replace(/(\d*\.\d\d)\d*/, '$1')
s = s.replace('.', ',')
const re = /(\d)(\d{3},)/
while (re.test(s)) { s = s.replace(re, '$1,$2') }
s = s.replace(/,(\d\d)$/, '.$1')
if (type == 0) { // 不带小数位(默认是有小数位)
const a = s.split('.')
if (a[1] == '00') {
s = a[0]
}
}
return s
}
# 去除html中的 style 属性
/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, ''
防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。（信我，你看完肯定就懂了）
这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件，返回当前滚条与顶部的距离 这个需求很简单，直接写:
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = showTop
# 查看网页 cookie 并设置 cookie
var cookies = document.cookie.split(";");
for (let k in cookies) {
let key = cookies[k].split('=')[0].replace(/(^\s*)|(\s*$)/g, "")
let regKey = key.replace('[', '\\[').replace(']', '\\]')
let reg = new RegExp(`(?<=${regKey}=).*?(?=(;|\r\n|$))`)
let co = cookies[k].match(reg)
console.log(key + '=' + (co ? co[0] : ''))
//javascript:document.cookie = key + '=' + (co ? co[0] : '')
}
# 防抖(debounce)
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}
当然 上述代码是为了贴合思路，方便理解（这么贴心不给个赞咩？），写完会发现其实 time = setTimeOut(fn,delay)是一定会执行的，所以可以稍微简化下：
/*****************************简化后的分割线 ******************************/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
// 然后是旧代码
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置
此时会发现，必须在停止滚动1秒以后，才会打印出滚动条位置。
到这里，已经把防抖实现了，现在给出定义：
- 对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
# 节流(throttle)
继续思考，使用上面的防抖方案来处理问题的结果是：
如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。 但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？（此处暂且不论哪种方案更合适，既然产品爸爸说话了我们就先考虑怎么实现）
其实很简单：我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。
效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
实现 这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态：
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
*/
// 以下照旧
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)