2 つの配列・連想配列を比較する JavaScript のライブラリです。 GitHub で配布しています。
JavaScript の .childNodes と .children の違い
「何を言ってやがる、違わねぇよ！
おまえは NodeList で、オレは HTMLCollection だ！
そこになんの違いもありゃしねぇだろうが！」
というわけでどう違うのかって話なんですが、僕はよく分かっていません。分かっていることといえば .childNodes はタグの内側の文字列も扱うという点でしょうか。下のようにすると分かります。
<body>
<p id="p">abcde</p>
</body>
<script>
let p = document.querySelector("#p")
console.log(p.childNodes) // 戻り値 : NodeList [text]
console.log(p.children) // 戻り値 : HTMLCollection []
</script>.childNodes が length = 1 の配列でまだ何か含んでいるのに対して、 .children は length = 0 の配列でこれ以上奥に HTML 要素がないことを示しています。ここでさらに下のようにしてみます。
<body>
<p id="p">abcde</p>
</body>
<script>
let p = document.querySelector("#p")
console.log(p.childNodes[0].textContent) // 戻り値 : abcd
</script>なんか難しい話になると、きっと処理速度が .children のほうが 1ns 速いとかそんなことになるんじゃないかと想像しているんですが、どうなんでしょうね。
文章内の括弧を処理する JavaScript ライブラリ brackettool.js
タイトルのとおりのライブラリを書きました。
説明
処理パターンは 3 つあります。
また、括弧とその周辺部のみをピックアップして返すモードがあります。
実装
出力エリア
使い方
- 第 1 引数 src には処理の対象となる文章を与えます
- 第 2 引数 brackets には処理する括弧の対を与えます
- "["{", "}"]" のように配列で与えてください
- "["{", "}", "<", ">"]" のように複数を与えることもできます
- "[["{", "}"], ["<", ">"]]" のようにすることもできます
- "["=={", "}=="]" のように括弧として複数の文字列を与えることもできます
- 第 3 引数 procType には括弧を処理する方法を与えます
- "delete" とすると括弧を削除します
- "brackets" とすると括弧に以下のマークアップが加えられます
- 前括弧 <span class="brackets brackets-before brackets-${i}">
- 後ろ括弧 <span class="brackets brackets-after brackets-${i}">
- ${i} は括弧を与えた順番に付けられる括弧固有の数値で 0 から始まる整数です
- "contents" とすと括弧を削除して括弧に囲われていた部分に以下のマークアップが加えられます
- 第 3 引数 selectMode で "pickup" を与えると括弧の部分を抜き出します。引数を与えないか "hole" を与えると抜き出しを行いません
- 第 4 引数 outputType には第 3 引数で "pickup" を与えた際のリスト表示のマークアップの種類を与えます。省略することが可能です
- 引数を与えないか "array" とすると配列として返します
- "ul" とすると箇条書き（順序なしリスト）として返します
- "ol" とすると数字付き箇条書き（順序付きリスト）として返します
- 第 5 引数 beforeNum では第 3 引数で "pickup" を与えた際に抜き出す括弧以前の文字数を与えます
- 第 6 引数 afterNum では第 3 引数で "pickup" を与えた際に抜き出す括弧以後の文字数を与えます
GitHub
CDN
https://cdn.jsdelivr.net/gh/satsuki-thyme/brackettool.js@main/brackettool.min.js
JavaScript で正規表現のエスケープをする関数
正規表現ではエスケープが必要な文字があります。通常は事前にエスケープしておくわけですが、下のような場合には随時のエスケープが必要になります。
function fn(src, keyword) {
let rx = new RegExp(`foo${keyword}baa`, "g")
return src.replace(rx, "hoge")
}エスケープする関数が必要になる前に準備してストックしておけば安心ですね。僕は下のように書いています。
function esc(r) {
if (typeof r === "string" || r instanceof String) return p(r)
else if (Array.isArray(r)) return r.map(r => r = p(r))
else return r
function p(r) {
return r.replace(/(/|\|^|$|*|+|?|.|(|)|[|]|{|})/g, "\$1")
}
}文字列が入力されればエスケープした文字列で返し、配列が入力されればエスケープした配列で返します。その他はそのまま返します。
冒頭の例に適用すると下のようになります。
function fn(src, keyword) {
let rx = new RegExp(`foo${esc(keyword)}baa`, "g") // <= ここ
return src.replace(rx, "hoge")
}この関数は GitHub で公開しています。コードの中にはアンエスケープする関数が含まれているのですが、必要になることがあるのか不明です。一応作りました。使ったことないけど。
JavaScript で非同期関数の戻り値を関数の外に出したかった
下のような話です。非同期関数の戻り値は then() で受けるでしょ、それで then() の戻り値は then() で受けるでしょ。あれ、そうすると値は一生 then() の中から出られないの？ という困りごとがありました。
function fn() {
asyncFunction()
.then(() => {
return value // value を fn() の返す戻り値にしたいんだけど？
})
}方法を知らなかったんですね。 JavaScript の本など読んだことがないので基本的なことが分かっていないのです。気付いたときにはあっけに取られ、乾いた笑いが漏れました。さて、下のようにするといいようです。
function fn() {
return asyncFunction() // ここで return するだけ
.then(() => {
return value
})
}