Preface: This blog records the knowledge points that I encountered in my work. Some of them are forgotten because I have not used them for a long time, some are small demos that implement some common functions, and some are just blind spots.
1. Regular correlation
(1) Match Hello every((one))!I am a cool ((girl)).the text enclosed in double brackets in a string, that is, oneand girl:
1. Knowledge points
- Positive positive preview:
(?=pattern), placed after the substring, the matching order is from left to right, used to match the substring before (), that is, the content following a substring conforms to this matching rule, then the substring can be found string; - Reverse positive pre-check:
(?<=pattern)similar to forward positive pre-check, but in the opposite direction. It is placed in front of the substring you are looking for. If the content in front of a substring can match the rules, then the substring can be found. - Match any number of any characters:
/.*?/
2. Analysis and implementation
- The matching substring is preceded by
((, use/(?<=\(\()(.*?)/; the matching substring is followed by)), use/(.*?)(?=\)\))/, and the combination is/(?<=\(\()(.*?)(?=\)\))/g
- You can also use
matchAllmethods to return an iterable object, and usefor ofloops to obtain matching details, includingindex,inputetc.
(2) Matching characters that are not \u0000-\u1111included in :
/((?![\u0000-\u1111]).)/g
(3) .Matches all characters except , and \nafter adding modifiers, it will match all characters including .\rs\n\r
2. css related
(1) Implementation of adding characters
<style>
.insert{
width: 20px;
height: 20px;
border-left: 1px solid red;
border-top: 1px solid red;
transform: rotate(45deg);
}
</style>
<div class="insert"></div>
(2) Select the css selector for your own use &, and use it in scss or less
(3) CSS selects the second to last element:selector:nth-child(n+2)
(4) <select>The drop-down arrow behind the hidden label:appearence:none
(5) Simple application of media query
@media (max-width: 500px) {
body {
background-color: lightblue;
}
}
(6) Font definition@font-face
font-family: The name used when applying the font
src: Font file path font format (search from front to back)
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
(7) Implementing a simple virtual progress bar
<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>
3. JavaScript related
(1) element.closestSum findmethod:
- Both methods accept a selector,
closestsearch from the current element to the parent, and return the first element that matches the selector;findthe method searches from the child element to the child, and returns all elements that match the selector.
(2) In the rich text editor, when the user pastes, the style is removed and only the text is retained.
event.clipboardDataProperty is anDataTransferobject
<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>
(3) Exit all loops forin the loop ; exit the current loop.breakcontinue
(4) '\n\r'.trim()==""// true
(5) The difference between intercepting strings sliceand intercepting negative numbers is that negative numbers are allowed and all negative numbers will be converted to 0substringslicesubstring
(6) Use js to move the cursor to the end of the element
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);
}
}
4. HTML related
(1) <base>Label
HTML <base>URLElement specifies the root for all relative elements contained in a documentURL.- If the document does not contain
<base>an element,baseURIthe default isdocument.location.href. <base>Elements can sethrefattributes andtargetproperties. If one of them is set,<base>the element must be placed before allurlelements that need to be used, such as<a>tags.hrefThe attribute specifies the document baseURL, for example, given<base href="https://example.com">and the link<a href="#anchor">Anker</a>, this link will point tohttps://example.com/#anchor- If multiple elements are specified
<base>, only the firsthrefandtargetvalue will be used, the rest will be ignored. targetSpecify the link opening method:- _self: Load results into the current browsing context. (This value is the element's default value).
- _blank: Load results into a new unnamed browsing context.
- _parent: Load results into the parent browsing context (if the current page is an inline box). If there is no parent structure, this option behaves like _self.
- _top: Load results into the top-level browsing context (the top-level browsing context of the current context). If there is no parent, this option behaves like _self.
(2) Make <select>the drop-down box into a label form, and the width <option>changes with the number of selected texts.
<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>
5. Angular related
(1) *ngForObtainindex
*ngFor=“let item of list;let I = index”
Dynamically add custom attributes to html elements
angularYou should use it to dynamically bind custom properties in[attr.data-id]="value“so that you canele.attr(‘data-id’)find the value of this custom property.