イベントが取得できない、発火しない、と困っていました。下のようなコードです。
let element = null
new Promise(resolve => {
// 処理
})
.then(rly => {
element.innerHTML = rly
})
element.onclick = () => {
// 処理
}
これだと onclick が取得できません。タイミングの問題で element.innerHTML = rly する前に element.onclick が発行されます。これでは null にイベントリスナーが紐付いてしまいます。なので下のようにしました。
let element = null
new Promise(resolve => {
// 処理
})
.then(rly => {
element.innerHTML = rly
element.onclick = () => {
// 処理
}
})ある処理の終了と、諸要素のロードの両方が終了したタイミングで次の処理に移る書き方です。
let promise0 = new Promise(resolve => {
// 処理
})
let promise1 = new Promise(resolve => {
window.onload = () => {
resolve()
}
})
Promise.all([
promise0,
promise1
])
.then(rly => {
// 処理
})
Unicode Property Escapesの「Han」は次の記号を含みます（僕とChatGPT調べ）。
〜、。〈〉《》「」『』【】〔〕〖〗〘〙〃〆・〓
なので本当に感じだけにマッチさせるには次のように書くといいと思います。
/(?![〜、。〈〉《》「」『』【】〔〕〖〗〘〙〃〆・〓])\p{scx=Han}/u
Notionの開いているページの文字数を数えて表示する JavaScript です。Chromeの拡張機能「User JavaScript and CSS」を使用して導入してください。
/*
count word
*/
(() => {
document.querySelector(`body`).innerHTML += `<div class="count-word">Count</button>`
let countWordButton = document.querySelector(`.count-word`)
countWordButton.onclick = () => {
let contentsWrapper = document
.querySelector(`.notion-peek-renderer .notion-page-content`)
if (contentsWrapper) {
alert(countWord(contentsWrapper))
}
else {
alert(countWord(document.querySelector(`.layout .notion-page-content`)))
}
}
function countWord(elem) {
let count = 0
elem
.querySelectorAll(`.notranslate`)
.forEach(e => {
count += e.textContent.replace(/\\r?\\n/g, ``).length
})
return count
}
})()
/*
count word
*/
.count-word {
position: fixed;
z-index: 10000;
bottom: 110px;
right: 25px;
padding: 3px 7px 5px 7px;
line-height: 1;
color: #fff;
background-color: rgba(128, 128, 128, 0.5);
border-radius: 10px;
cursor: pointer;
}
.count-word:hover {
background-color: rgba(98, 98, 98, 0.5);
}
「javascript 配列の最頻値を求める | mebee」にあった以下のコードについて研究しました。
'use strict'
const arr = ["a", "a", "a", "b", "c", "d", "d", "e", "e", "e", "e"];
const c = (x, i, v) => (x[i] ? x[i].add(v) : x[i] = new Set(v), i);
const result = arr.reduce(function (x, v) { return (this.set(v, c(x, (this.get(v) + 1 || 1), v)), x); }.bind(new Map), []).pop();
console.log([...result]); // ['e']概要は下のとおりです。なかなかややこしいので 3 ステップに分けて解説します。 ‘use strict’ はなくても動くようなので省略しています。画像は拡大して表示することができます。
