tag: javascript 1/2
URLのパラメータから文字列を切り取って、記事のタイトルにする
このブログでは、記事のタイトルは、以下のようになってます。 h2 タグ タグについたクラスが element-title 記事のタイトルを指し示すセレクタというのが、両者をピリオドでくっつけた文字列 h2.element-title になります。 以下、この記事を指す URL にパラメータを指定したリンクです。 タイトル：あちらこちらに出没してます タイトル：不定期で人力検索も見てはいます パラメータ key に指定した文字...
正規表現の前や後ろの文字を切り出す ＠javascript
ソースコード const s = "aaaaaaaaaaaaaabbbbbbbbbbbbcccccccccccccc"; const re = /b+/g; // g フラグをつけないと、lastIndex がセットされない const m = re.exec(s); if (m) { console.log(s.slice(0, m.index)); // 前：aaaaaaaaaaaaaa console.log(m[0]); // 中：bbbbbbbbbbbb console.log(s.slice(re.lastIndex)); // 後：cccccccccccccc } 参考 RegEx...
メモ（ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita）
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiitaからのwindow.onerror の引数 → GlobalEventHandlers.onerror - Web APIs | MDNsourcemap って何 → ソースマップを使用する - 開発ツール | MDNロギングサービス → cheeaun/javascript-error-logging: A collection of JavaScript error logging services, resources and shiny things - GitHubcrossorigin 属性って何 → CORS 設定属性 - HTML | MDN → crosso...
今どきの文字コード変換
EUC で URI エンコードされた文字列を javascript で使いたい という件。 今どきは、TextDecoder を使うらしい。 fetch と組み合わせると、UTF-8 じゃないページでもデータを扱えるということらしい。 async function fetch_and_decode(url) { const response = await fetch(url, {credentials: "include", redirect: "follow"}); const responseURL = new URL(response.url); const contentTyp...
Example extensions - Mozilla
Example extensions - Mozilla | MDN annotate-page サイドバー ローカルストレージ（browser.storage.local） apply-css page action（アドレスバーの右側にあるボタン） ページへのスタイルの追加・削除 beastify ツールバーのポップアップから、コンテンツへの通信 bookmark-it ブックマークの追加・削除。 borderify URL のパター...
画像に色をつけて、くりんくりん回すやつのコード
こちらで使ってる、 モノトーンっぽい画像を赤くしている javascript のコード。 canvas を使ってる。 (function() { function insert_red_icon(img, target) { // change color with canvas // https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas let canvas = target.appendChild(Object.assign(document.createElement("canvas"), ...
Yet Another SyntaxHighlighter
探してたわけではないのだけれど highlight.js とかいうのが軽いらしいのだ。 というわけで、SyntaxHighlighter から highlight.js への切り替えの顛末。 tl;dr highlight.js こんな感じで使う HTML のエスケープが必要 予約語が Bold になるのがなあ 行番号がつかない 行のハイライトもない SyntaxHighlighter からの移行 タブの空白変換 fc2 のテンプレートエディタの問...
テンプレートを変えてみた
テンプレートを変えてみようかなと思ったのだ。 もう、8年も使ってたし、レスポンシブなのにしてみても良いかな、と。 tl;dr こんな手順、かな 新しいテンプレートを探す 既存のテンプレートのカスタマイズ箇所を確認 HTML、javascript 基本スタイル 追加スタイル プラグインの順序 旧いプラグインの並び 新しいプラ...
道具
に頼るのが悔しいときもある...
ひらがなやカタカナ、英数記号の文字列
文字の組み合わせをプログラムで書いたりするときに、たまに使うので。 ひらがなとカタカナ 濁音、半濁音も含む。 var HIRA = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉゃゅょっ"; var KATA = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンガギグ...
SyntaxHighlighter
バージョンアップついでに、本家がホスティングしてくれているのを使ってみる。 http://alexgorbatchev.com/SyntaxHighlighter/hosting.html <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript&...
IE8 で、はまったこと
もう、レガシーな環境なのかもしれないけど、ちょっとはまったのでメモ。IE8 を使う環境で、window.location.href を挿げ替えて、別ページにジャンプさせるという単純なスクリプト。一応、パラメータを構築したりとか、ちょっとしたロジックがあったので、関数化してボタンの onclick にかませて動作を確認。動作を確認した関数を、window.onload に設定して、IE のデバッガ（F12 で起動する開発者ツール）を使って、ブレークポイ...
記事のランダムリンクページ
人力検索で、こんな質問が。 FC2ブログをやっているのですが、カテゴリごとのランダムページを作りたいです。 http://q.hatena.ne.jp/1387305611 記事一覧を加工するようなスクリプトを書いてみた。 → archives.html?random=true $(function() { var N = 2; /* 表示する記事の件数 */ if (document.location.search.indexOf("random=true") < 0) { return; } function p...
XMLHTTP でフリーズ＠IE
度重なる Internet Explorer のフリーズ。 画面が真っ白のままだったり、スクリプトはタイムアウトのエラーを返してきたり。 KB886710 － IEのフリーズ 未だに直ってないらしい ＞IE onunload で abort() を呼べば良いらしいけど、書き散らかしたコードがいっぱいあると、直すのも大変。 ActiveXObject のコンストラクタを置き換えてしまう、というのを思いついたのだけれど、全部置き換えちゃうのも影響範囲が見え無...
javascript で Transformer
xml に xsl を適用するときに、xml-stylesheet処理命令 を使うと、 xsl をパースするためのコストがかかる IE だと 使ってくれるな と Knowledge Base に (堂々と) 書いてある というわけで、javascript で JAXT の javax.xml.transform.Transformer に当たることを javascript のコードで書いてみた。 本当は、ここにサンプルも含めて載せたかったのだけれど、ファイルのアップロード先が別ドメインなので、セキュリテ...
文字列を選択状態にする
<textarea> や <input> だけじゃなく、文字列を選択状態にするスクリプト。 動作確認は、IE と Firefox だけ。 // ele : 選択対象の要素 // start : 選択開始位置 (0 始まり) // length : 選択する長さ function selectText(ele, start, length) { if (window.getSelection) { var rng = window.content.document.createRange() if (! start) { rng.selectNodeContent...