前言：本篇博客记录工作中遇到的不会的知识点，有的是由于长时间不用忘记了，有的是实现某些常见功能的小demo，还有的是只是盲区。
一、正则相关
（一）匹配Hello every((one))!I am a cool ((girl)).一段字符串中，被双括号括起来的文本，即one和girl：
1. 知识点
- 正向肯定预查：
(?=pattern)，放在子串的后面，匹配顺序从左向右，用于匹配()前面的子串，即一个子串后面跟的内容符合这个匹配规则，那么就可以找到这个子串； - 反向肯定预查：
(?<=pattern)，与正向肯定预查类似，但是方向相反，放在要找的子串的前面，如果一个子串前面的内容可以匹配上规则，那么就可以找到这个子串 - 匹配任意数量的任何字符：
/.*?/
2. 分析实现
- 匹配子串前面是
((，使用/(?<=\(\()(.*?)/；匹配子串后面是))，使用/(.*?)(?=\)\))/，组合起来就是/(?<=\(\()(.*?)(?=\)\))/g
- 还可以使用
matchAll方法，返回一个可迭代的对象，使用for of循环，可以获取到匹配的详细信息，包括index、input等
（二）匹配到unicode编码不在\u0000-\u1111内的字符：
/((?![\u0000-\u1111]).)/g
（三）.匹配除了\n、\r以外的所有字符，加上s修饰符后，会匹配包括\n、\r的所有字符。
二、css相关
（一）实现增添符
<style>
.insert{
width: 20px;
height: 20px;
border-left: 1px solid red;
border-top: 1px solid red;
transform: rotate(45deg);
}
</style>
<div class="insert"></div>
（二）css选择器选中自己使用&，在scss或less中使用
（三）css选中第二个到最后一个元素：selector:nth-child(n+2)
（四）<select>标签隐藏后面自带的下拉箭头：appearence:none
（五）媒体查询简单应用
@media (max-width: 500px) {
body {
background-color: lightblue;
}
}
（六）字体定义@font-face
font-family：应用该字体的时候使用的名字
src：字体文件路径 字体格式（从前往后依次查找）
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
（七）实现简易虚拟进度条
<style>
.container {
height: 3px;
width: 500px;
background: #cccccc;
}
.process {
display: block;
height: 100%;
width: 0;
background: blue;
transition: width 10s;
}
</style>
<div class="container">
<span class="process"></span>
</div>
<script>
setTimeout(function () {
document.querySelector('.process').style.width = '100%';
}, 1000);
</script>
三、JavaScript相关
（一）element.closest和find方法：
- 两个方法都是接受一个选择器，
closest从当前元素开始向父级查找，返回第一个匹配选择器的元素；find方法从子元素开始向子级查找，返回所有匹配选择器的元素。
（二）富文本编辑器中，用户粘贴时，去除样式，只保留文本
event.clipboardData属性是一个DataTransfer对象
<style>
div{
width: 500px;
height: 500px;
border: 1px solid #eee;
}
</style>
<div contenteditable="true"></div>
<script>
var div = document.querySelector('div');
div.addEventListener('paste', function (event) {
event.preventDefault();
div.innerHTML = event.clipboardData.getData('text/plain');
});
</script>
（三）for循环中break退出所有循环；continue退出当前循环。
（四）'\n\r'.trim()=="" // true
（五）截取字符串slice和substring区别在于负数截取，slice允许负数，substring会将所有负数转化为0
（六）使用js将光标移动到元素末尾位置
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
const range = document.createRange();
range.selectNodeContents(el);
// false表示光标，true表示高亮选中
range.collapse(false);
const sel = window.getSelection();
// 先把原来的range对象删除
sel.removeAllRanges();
sel.addRange(range);
}
}
四、HTML相关
（一）<base>标签
HTML <base>元素 指定用于一个文档中包含的所有相对URL的根URL。- 如果文档不包含
<base>元素，baseURI默认为document.location.href。 <base>元素可以设置href属性和target属性，如果设置了其中一个，<base>元素必须放在所有需要用到url的元素之前，例如<a>标签。href属性指定文档基础URL，例如，给定<base href="https://example.com">以及链接<a href="#anchor">Anker</a>，此链接会指向https://example.com/#anchor- 如果指定了多个
<base>元素，只会使用第一个href和target值，其余都会被忽略。 target指定链接打开方法：- _self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
- _blank: 载入结果到一个新的未命名的浏览上下文。
- _parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
- _top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。
（二）将<select>下拉框做成标签形式，宽度随选中的<option>中的文本数量变化而变化
<style>
select {
appearance: none;
background: palevioletred;
border: none;
height: 30px;
border-radius: 3px;
text-align: center;
}
</style>
<div class="container">
<select>
<option value="1">好</option>
<option value="2">很好</option>
<option value="3">真的好</option>
<option value="4">非常地好</option>
<option value="5">真的太好了</option>
<option value="6">非常非常的好</option>
</select>
</div>
<script>
const select = document.querySelector('select');
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
resetWidth();
}
}
select.addEventListener('change', function(e) {
resetWidth();
})
function resetWidth() {
const text = select.options[select.selectedIndex].text;
select.style.width = text.length * 20 + 20 + 'px';
}
</script>
五、Angular相关
（一）*ngFor获取index
*ngFor=“let item of list;let I = index”
给html元素动态增加自定义属性
- 在
angular中动态绑定自定义属性应该用[attr.data-id]="value“，这样就可以用ele.attr(‘data-id’)找这个自定义属性的值