HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

度々必要となる正規表現、その都度webで検索しては流用するということを続けていましたが、精度は異なれ毎回異なるコードをもってきているようで気持ち悪かったので、自身のサイトでまとめて管理、検証していこうと思います。

以下、目的別に分けて随時更新していきます。

HTMLタグの削除

文字列からHTMLタグを除去する正規表現です。

str.replace(/<([^"'>]|"[^"]*"|'[^']*')*>/g,'');

jQuery UIのDatepickerを実装したのですが、「本日の日付」をセットする「Today」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。

今回、発生したのは以下の環境です。

  • jQuery 3.2.1
  • jQuery UI 1.12.1

例えばオフィシャルのサンプルに倣って、以下のように「Today」ボタンと「Done」ボタンを表示する設定であるオプション「showButtonPanel」をセットして、Datepickerを構築します。

$("#datepicker").datepicker({
	showButtonPanel: true
});

Datepicker

そうすると上図のように両ボタンは表示されますが、なぜか「Today」ボタンが機能せず、押すことができません。

オフィシャルのサンプルページでも確認してみましたが、同様に機能していないようです。
Datepicker | jQuery UI

HTMLのテキストフォームを構築する際に、excelのオートコンプリート機能のような、入力補完をしてくれるしくみをHTML5で実装します。

過去にこのような機能をを実装するのに、苦労してJavaScriptで無理やり実現した記憶があります。
しかし、最近、同様の機能を実装しなければならなくて改めて調べてみると、HTML5のみで実装できるようになっているんですね。こりゃ楽だ。

では、実際のコードですが、以下のように記述すると、オートコンプリート機能が有効になります。
例えば、input textタグに「list」要素に任意の「example1」を付加すると、同名のIDを指定した「datalist」タグのoption要素が入力候補としてセットされます。

jQueryで数字がカウントアップ、または、カウントダウンするアニメーションを実装します。

ショッピングサイトや保険見積もりサイトなどで、商品やオプションを選択すると、合計金額がカウントするアニメーションをよく見かけます。
今回、それを実装する機会があったので、ここにメモとして残しておきます。

例えば、以下のHTMLの金額の数字部分をカウントするとします。

<div id="price">
<span>0</span> 円
</div>

0から1000へアニメーションを実行するJavaScriptコードは以下のとおりです。

$({count: 0}).animate({count: 1000}, {
	duration: 1000,
	easing: 'linear',
	progress: function() { 
	    $('#price span').text(Math.ceil(this.count)); 
	}
});

JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法です。

以前に、jQueryのプラグインを利用してSELECTタグを装飾する方法を紹介しました。
フォームセレクトを装飾するjQueryベースプラグイン「customSelect」

それまでは、フォームのCSSのみでの装飾は困難だったので、スクリプトを利用する必要がありました。
しかし、最近ではモダンブラウザのCSS3対応が進み、現在ではほとんどの環境で、スタイルのみで好みのデザインへ変更することができるようになりました。

これがデフォルトのフォームSELETタグの表示です。

Category

Monthly Archives

Search