0%

需求

富文本编辑器包含 html 标签,期望去掉 html 标签只保留文本

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function extractContent(s) {
var span = document.createElement('span');
span.innerHTML = s;
return span.textContent || span.innerText;
};
const str = `<!DOCTYPE HTML>
<html>
<head>
<title>#Persistent</title>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=iso-8859-1\\">
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
<link href=\\"../static/theme.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"/>
<script src=\\"../static/content.js\\" type=\\"text/javascript\\"></script>
</head>
<body>
</html>
`;
extractContent(str)
阅读全文 »

需求

富文本编辑器包含 html 标签,期望去掉 html 标签只保留文本

正则

1
<.+?>

js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const regex = /<.+?>/gm;
const str = `<!DOCTYPE HTML>
<html>
<head>
<title>#Persistent</title>
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=iso-8859-1\\">
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
<link href=\\"../static/theme.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"/>
<script src=\\"../static/content.js\\" type=\\"text/javascript\\"></script>
</head>
<body>
</html>
`;
str.replace(regex, '')
阅读全文 »

创建一个这样的数组:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[ ...Array(N).keys() ].map( i => i+1);

Array(N).fill().map((_, i) => i+1);

Array.from(Array(N), (_, i) => i+1)

Array.from({ length: N }, (_, i) => i+1)

Array.from({length: 5}, (v, k) => k+1);
// [1,2,3,4,5]

Array.from(Array(10).keys())
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

[...Array(10).keys()]
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from({length: 10}, (_, i) => i + 1)
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var N = 10;
Array.apply(null, {length: N}).map(Number.call, Number)
// result: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.apply(null, {length: N}).map(Function.call, Math.random)
// result: [0.7082694901619107, 0.9572225909214467, 0.8586748542729765, 0.8653848143294454, 0.008339877473190427, 0.9911756622605026, 0.8133423360995948, 0.8377588465809822, 0.5577575915958732, 0.16363654541783035]

后记

代码都是从网上抄下来的,Mark一下
https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n

最近在写一个 vscode 插件,需要参考一下 CODELF 的功能,看了源码之后提取出其中核心部分代码,nodejs 下,网页端都可以跑

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
const axios = require('axios');
let variableRepoMapping = {};
axios
.get('https://searchcode.com/api/codesearch_I/?q=soup&p=1&per_page=100')
.then((res) => {
console.log(`res`, res);
let { data } = res;
let { results } = data;
console.log(`parseVariableList`, parseVariableList(results, 'soup'));
});

function getKeyWordReg(keyword) {
return new RegExp(
'([\\-_\\w\\d\\/\\$]{0,}){0,1}' + keyword + '([\\-_\\w\\d\\$]{0,}){0,1}',
'gi'
);
}

function getKeyWroddRegs(keywords) {
return keywords.split(' ').reduce((accumulator, curr) => {
if (curr.length && curr.length > 1) {
return accumulator.concat(getKeyWordReg(curr));
}
return accumulator;
}, []);
}

function parseVariableList(results, keywords) {
let vals = [],
variables = [];
results.forEach((res) => {
res.repo = res.repo.replace('git://github.com', 'https://github.com');
//filter codes
const lineStr = Object.keys(res.lines)
.reduce((accu, line) => {
let lstr = res.lines[line];
//no base64
if (!(/;base64,/g.test(lstr) && lstr.length > 256)) {
return accu.concat(lstr);
}
return accu;
}, [])
.join('')
.replace(/\r\n/g, ' '); // remove \r\n
//match variables
getKeyWroddRegs(keywords).forEach((reg) => {
(lineStr.match(reg) || []).forEach((val) => {
//remove "-" and "/" from the start and the end
val = val.replace(/^(\-|\/)*/, '').replace(/(\-|\/)*$/, '');
updateVariableRepoMapping(val, res);
if (
!/\//g.test(val) /*exclude links*/ &&
vals.indexOf(val) === -1 &&
vals.indexOf(val.toLowerCase()) === -1 &&
vals.indexOf(val.toUpperCase()) === -1 &&
val.length < 64 /*too long*/
) {
vals.push(val);
variables.push({
keyword: val,
repoLink: res.repo,
repoLang: res.language,
});
}
});
});
});
return variables.map((val) => {
val.repoList = getVariableRepoMapping(val.keyword);
return val;
});
}

function updateVariableRepoMapping(val, repo) {
if (!/\//g.test(val) /*exclude links*/ && val.length < 64 /*too long*/) {
val = `__${val.toLowerCase()}`;
variableRepoMapping[val] = variableRepoMapping[val] || [];
if (!variableRepoMapping[val].find((key) => key.id == repo.id)) {
repo.lines = null;
delete repo.lines;
variableRepoMapping[val].push(repo);
}
}
}

function getVariableRepoMapping(val) {
val = `__${val.toLowerCase()}`;
return variableRepoMapping[val];
}

function isZH(val) {
let isZH = false;
val
.replace(/\s+/gi, '+')
.split('+')
.forEach((key) => {
if (/[^\x00-\xff]/gi.test(key)) {
isZH = true;
}
});
return isZH;
}

array –> set

1
2
let array = [1, 2, 3, 4];
let set = new Set(array);

set –> array

1
2
let demo = new Set([1, 2, 3, 4]);
Array.from(demo);

递归一个对象,拿到里面的key,并且按层次输出到数组中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 输入
let input = {
a: {
b: '123',
c: {
d: 456,
},
},
b: {
e: 789,
},
f: 222,
};

// 输出
let output = ['a.b', 'a.c.d', 'b.e', 'f'];

解决方法

一点也不高明的递归方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function deepTree(tree) {
let arr = [];
for (const key in tree) {
if (tree.hasOwnProperty.call(tree, key)) {
const element = tree[key];
if (Object.prototype.toString.call(element) == '[object Object]') {
deepTree(element).forEach((element) => {
arr.push(`${key}.${element}`);
});
} else {
arr.push(`${key}`);
}
}
}
return arr;
}

console.log(`deepTree(input)`, deepTree(input))

来自德巨的分享

群友分享了广度优先遍历和深度优先遍历

阅读全文 »

整理一下遍历文件夹所有文件内容的几个方法

Glob

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const glob = require('glob');
const path = require('path');
const fs = require('fs-extra');

function getDirectories(src, callback) {
glob(src + '/**/*', callback);
}

getDirectories(srcPath, async function (err, res) {
if (err) {
console.log('Error', err);
} else {
for (let index = 0; index < res.length; index++) {
const element = res[index];
// 这段代码是检查是否文件夹的
if (!fs.lstatSync(element).isDirectory()) {
await readFile(element);
}
}
}
});

async function readFile(params) {
return fs.readFile(params, 'utf8').then((e) => {
console.log('这是读取的文件内容', e);
return e;
});
}

原生fs

简单实现

1
2
3
4
5
6
7
8
9
10
11
function traverseDir(dir) {
fs.readdirSync(dir).forEach(file => {
let fullPath = path.join(dir, file);
if (fs.lstatSync(fullPath).isDirectory()) {
console.log(fullPath);
traverseDir(fullPath);
} else {
console.log(fullPath);
}
});
}

并行遍历文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var fs = require('fs');
var path = require('path');
var walk = function(dir, done) {
var results = [];
fs.readdir(dir, function(err, list) {
if (err) return done(err);
var pending = list.length;
if (!pending) return done(null, results);
list.forEach(function(file) {
file = path.resolve(dir, file);
fs.stat(file, function(err, stat) {
if (stat && stat.isDirectory()) {
walk(file, function(err, res) {
results = results.concat(res);
if (!--pending) done(null, results);
});
} else {
results.push(file);
if (!--pending) done(null, results);
}
});
});
});
};

串行遍历文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var fs = require('fs');
var path = require('path');
var walk = function(dir, done) {
var results = [];
fs.readdir(dir, function(err, list) {
if (err) return done(err);
var i = 0;
(function next() {
var file = list[i++];
if (!file) return done(null, results);
file = path.resolve(dir, file);
fs.stat(file, function(err, stat) {
if (stat && stat.isDirectory()) {
walk(file, function(err, res) {
results = results.concat(res);
next();
});
} else {
results.push(file);
next();
}
});
})();
});
};

使用

1
2
3
4
walk(process.env.HOME, function(err, results) {
if (err) throw err;
console.log(results);
});

后记

这儿有很多优秀的方法

锚点点击后,可以滚动到指定的Dom元素,这个dom元素会贴近最顶部

但是顶部有个浮动的Header,所以需要在滚动的时候进行偏移。

锚点偏移

网上的方法很多,暗锚、添加顶部占位,后来我发现了个牛逼方法,真的牛逼

offsetting an html anchor to adjust for fixed header

改了一下,如下

简单实现

阅读全文 »

有一句话说的好:“工欲善其事必先利其器

自己的英语功底不好,起名困难,虽然有 codeif 这个命名工具,但是这个插件好像不怎么好使,每次都要打开一个网页.

于是我改了一下插件 Google Translate,加了一些功能。上视频:

运行效果

快速翻译为变量名

快速批量翻译为变量名

核心代码部分

翻译部分的代码直接看那个插件的源码就可以了。

下面是我自己改了一下插件。

1
2
3
4
5
6
7
8
9
10
// 将翻译结果改为小驼峰变量名
function littleHump(params = '') {
let str = params.split(' ').map(e => e.charAt(0).toUpperCase() + e.slice(1))
str[0] = str[0].toLowerCase()
return str.join('')
}

let test = 'Google Translate'

console.log(littleHump(test)) // googleTranslate

有一句话说的好:“工欲善其事必先利其器

每次新建一个 vue 文件都要自己复制一份项目模板过来,太麻烦了。我在网上搜了一下资料,自定义了代码片段。

  1. 新建一个文件,如 test.vue
  2. 左下角设置中,选择用户代码片段 - vue.json
  3. test.vue 中写好你想要的代码片段模板,如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div></div>
</template>

<script>
export default {
name: '',
components: {},
props: [],
data() {
return {};
},
computed: {},
watch: {},
beforeMount() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
阅读全文 »