167 lines
No EOL
4.6 KiB
Markdown
167 lines
No EOL
4.6 KiB
Markdown
# Javascript
|
||
|
||
- **Split regex**
|
||
|
||
1: when using split function using regex, if we want to include delimiters in array instead of just skipping them then we need to include brackets for delimiters.
|
||
for eg:
|
||
|
||
```jsx
|
||
calcInput='2*3'
|
||
let arr = calcInput.split(/([*\/+-])/);
|
||
// arr-> ['2', '*', '3']
|
||
without brackets split(/[*\/+-])/)
|
||
// arr=['2', '3']
|
||
```
|
||
|
||
|
||
2: **typeof**: to get type of literal.
|
||
|
||
for eg:
|
||
|
||
`typeof 'str’` -> ‘string’
|
||
|
||
- regex reference
|
||
|
||
[JavaScript RegExp Reference](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)
|
||
|
||
```python
|
||
import re
|
||
In [14]: par = "This is a paragraph? So it is! Ok, there are 3 sentences."
|
||
In [15]: re.split(r'[.!?]+', par)
|
||
Out[15]: ['This is a paragraph', ' So it is', ' Ok, there are 3 sentences', '']
|
||
```
|
||
|
||
for splitting sentences in python
|
||
|
||
- Parsing using regex
|
||
|
||
Suppose if we wnna extract id from url or text then
|
||
|
||
`id = /var k__id = "(.*?)"/.exec(result)[1]`
|
||
|
||
also to extract id from embed youtube video.
|
||
|
||
for eg:
|
||
|
||
```jsx
|
||
let url="[https://www.youtube.com/embed/Ko58_KjgM0E](https://www.youtube.com/embed/Ko58_KjgM0E)"
|
||
let reg=/embed\/(.*)/
|
||
const id=reg.exec('https://www.youtube.com/embed/Ko58_KjgM0E')[1]
|
||
|
||
// Output:
|
||
// "Ko58_KjgM0E"
|
||
```
|
||
|
||
- Using fetch to send form data
|
||
|
||
in body use format `<key>=<value>` and use `content-type: "application/x-www-form-urlencoded"`.
|
||
|
||
```jsx
|
||
const getToken = async () => {
|
||
const url = "https://accounts.spotify.com/api/token";
|
||
const authOptions = {
|
||
method: "post",
|
||
// url: "https://accounts.spotify.com/api/token",
|
||
headers: {
|
||
Authorization:
|
||
"Basic " +
|
||
new Buffer(clientID + ":" + clientSecret).toString("base64"),
|
||
"Content-Type": "application/x-www-form-urlencoded",
|
||
},
|
||
// form data with key 'grant_type' and value 'client_credentials'
|
||
// written as
|
||
body: "grant_type=client_credentials",
|
||
|
||
// json: true,
|
||
};
|
||
|
||
const result = await fetch(url, authOptions);
|
||
const data = await result.json();
|
||
return data.access_token;
|
||
};
|
||
```
|
||
|
||
- HTTP basics
|
||
|
||
[https://eloquentjavascript.net/18_http.html](https://eloquentjavascript.net/18_http.html#HTTP%201.1)
|
||
|
||
- onchange on select element
|
||
|
||
Another approach which can be handy in some situations, is passing the value of the selected `<option />` directly to the function like this:
|
||
|
||
```jsx
|
||
function myFunction(chosen) {
|
||
console.log(chosen);
|
||
}
|
||
|
||
<select onChange="myFunction(this.options[this.selectedIndex].value)">
|
||
<option value="1">Text 1</option>
|
||
<option value="2">Text 2</option>
|
||
</select>
|
||
```
|
||
- for react
|
||
```jsx
|
||
<select
|
||
onChange={(e) =>
|
||
myFunction(e.target.options[e.target.selectedIndex].value)
|
||
}
|
||
```
|
||
- Stimulate ctrl+click event
|
||
|
||
[https://stackoverflow.com/questions/34255506/simulate-ctrl-click-with-javascript-or-jquery-to-open-a-new-tab-without-focus](https://stackoverflow.com/questions/34255506/simulate-ctrl-click-with-javascript-or-jquery-to-open-a-new-tab-without-focus)
|
||
|
||
In pure javascript, you can use the `[MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent)` for that:
|
||
|
||
```jsx
|
||
document.getElementById("todo").dispatchEvent(new MouseEvent("click", {ctrlKey: true}));
|
||
|
||
```
|
||
|
||
To programatically open a new tab you can do that:
|
||
|
||
```jsx
|
||
const a = document.createElement("a");
|
||
a.setAttribute("href", "https://www.google.com/");
|
||
a.dispatchEvent(new MouseEvent("click", {ctrlKey: true}));
|
||
```
|
||
|
||
- Local storage
|
||
|
||
```jsx
|
||
const notestring = localStorage.getItem("notes");
|
||
|
||
// we can store objects so we need to convert them in json string first
|
||
const arrString = JSON.stringify(notes);
|
||
localStorage.setItem("notes", arrString);
|
||
// here 'notes' is key and arrString is value
|
||
|
||
// to remove the key
|
||
localStorage.removeItem("notes");
|
||
```
|
||
|
||
- Use npm package in vanilla js
|
||
|
||
install browserify using
|
||
|
||
`npm install -g browserify`
|
||
|
||
then install npm package in same directory
|
||
|
||
`npm i js-crypto-rsa`
|
||
|
||
script.js
|
||
|
||
```jsx
|
||
const rsa=require('js-crypto-rsa')
|
||
|
||
const key=rsa.generateKey(2048)
|
||
|
||
```
|
||
|
||
finally use
|
||
|
||
`browserify script.js -o bundle.js`
|
||
|
||
in index.html
|
||
|
||
`<script src="bundle.js"></script>` |