前言:本篇博客记录工作中遇到的不会的知识点,有的是由于长时间不用忘记了,有的是实现某些常见功能的小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’)
找这个自定义属性的值