メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】地味に便利な文字列に対して処理を行うメソッド

jQuery11
実はこのブログの検索ワードの1位はなんと
jQuery文字列なんです。そのワードで着た人は300人/月くらいですが、
僕のサイトでは多い方なので、文字列関係のメソッドを今日は紹介していけたらなと
そう思いまして、今日はこれについて書こうと思いました。

目次

文字の長さを取得する
文字の変換
文字列を取得

文字の長さを取得する

文字の長さにするには、まず要素内の文字をtextメソッドを使って
タグ以外の文字列を取得して、lengthプロパティを参照します。
こうすることで、要素内の文字数が何文字なのかを知ることができます。

</p>
<p>jQuery(function(){</p>
<p>     var sCount = jQuery(&quot;body&quot;).text().replace(/\s+/g,'').length<br />
     alert(sCount)</p>
<p>});</p>
<p>

replaceメソッド

文字列を変換するメソッドであります。第一引数に交換したい値を入れて第二引数に交換先の値を入れます。
今回は空白としたいので、”って風にしてあります。

第一引数の\sですがこれは、正規表現を使って、spaceとかtabとか改行とかをさしています。

つまり\sというのは、

<br />
    [ \f\n\r\t\v\u00A0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u2028\u2029\u202f\u205f\u3000]<br />

こいつらのことです。これを\sの変わりに書けば同じ事が可能ですが、
全部書くのはやはりちょっと面倒くさいので、\sがあるんだと思います。

次に\gではなく/gについてですが、これは正規表現のオプションです。
正規表現の終わりの文字はオプションだという風に覚えて下さい。このオプションの意味は全部検索を行うという意味です。
ほかにもiとmがあり、iは大文字、小文字を区別しないという意味で、mは行頭か行末に一致するものって意味らしいです。

ちょっとこれをやり過ぎると趣旨が変わってくるので、もっと正規表現やりたーいって人は
JavaScript 標準ライブラリ RegExpでも見て勉強してください。きっとなれます。

文字の変換

replaceメソッドの続きになります。
文字列Heにマッチしたら、これに置き換えるという風に書いてます。

</p>
<p>var c = jQuery(&quot;#str&quot;).text().replace(/He/g,'Hello World')<br />
alert(c)</p>
<p>

この時変数cの値はHello Worldになりますが、
HTMLのIDのstrのテキストノード(タグ以外の文字)は
変化しないということを覚えておいて下さい。

テキストノードを変更する

ブラウザ上の文字も変えたいのであれば、ちょっと工夫する必要があります。

決め打ちで良い場合

要素内の文字が1文しかない場合は

</p>
<p>&lt;p id=&quot;str&quot;&gt;もげりっこ&lt;/p&gt;</p>
<p>jQuery(&quot;#str&quot;).text(&quot;aaaa&quot;)</p>
<p>

こんな感じじゃダメでしょうか。

決め打ちできない場合

例えば、このほげもげをもげもげに変更したい場合

</p>
<p>&lt;p id=&quot;terms&quot;&gt;ほげもげ&lt;/p&gt;</p>
<p>var r = jQuery(&quot;#terms&quot;).text().replace(/ほげ/g,'もげ')<br />
jQuery(&quot;#terms&quot;).text(r)</p>
<p>

一行目でテキストノードを取得しつつreplaceメソッドで該当テキストノードに変換を加える。
そいつを変数に入れておき、その変数を指定箇所に適用するという一例を挙げて見ます。
もちろんこれ以外にもやり方は沢山あるので、考えてみてください。

文字列を取得

順番間違えましたが、こうします。

</p>
<p>var r = jQuery(&quot;#terms&quot;).text()</p>
<p>

要素内のテキストノードとマッチするセレクタ

要素内の特定の文字に対して処理を行える状態にする方法です。
これはもうサンプル見てもらうのが良いと思います。

</p>
<p>&lt;p id=&quot;terms&quot;&gt;もげもげ&lt;/p&gt;<br />
jQuery(&quot;#terms:contains('もげ')&quot;).text(&quot;あべし&quot;)</p>
<p>

このpのもげもげがあべしになります。

コード

今日のコードはFiddleに書いておいたのでまたみてみてくださいー。

関連記事

コメントをお待ちしております