jQuery で特定文字を画像に置き換える

筆者は文面によく矢印を使うが・・・この矢印
範囲を選択_005.jpg
は見た目がよろしくない。単独で見ればそれ程でもないが、文字がゴチャゴチャ混じっていると、矢印の向きが分かり辛い。これはフォントの影響であるが、特にLinuxだと顕著である。

そこで「jQuery」を利用して、矢印を画像に置き換えることにした。下のようになる。

「 → , ← , ↑ , ↓ 」

画像をサーバーにアップロードして、HTML内に以下のように記述すればよい。

<head>
・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
・・・
<script>
$(document).ready(function(){
$('p,li').each(function(){
var txt = $(this).html();
$(this).html(txt
.replace(/→/g,'<img alt="arrow" src="http://jkunblog.com/img/arrow-r.png">')
.replace(/←/g,'<img alt="arrow" src="http://jkunblog.com/img/arrow-l.png">')
.replace(/↑/g,'<img alt="arrow" src="http://jkunblog.com/img/arrow-t.png">')
.replace(/↓/g,'<img alt="arrow" src="http://jkunblog.com/img/arrow-b.png">')
);
});
});
</script>
</body>

筆者の場合、jQuery本体はGoogleが提供しているものを利用し、「p」と「li」要素内で矢印を使用しているので、 ↑ のような記述とした。

※画像のURLは適宜置き換えてください。

admin
カテゴリ:資料
タグ:Google
2017/10/04 14:46 | コメント (3)
◎この記事へのコメントは 3 件です。コメント欄を表示しますか?
話題を変えますがf,luが随分と良くなりましたね。本当に目が楽です。
Posted by 石川通隆 at 2017/10/06 21:41
f.luxのまちがいです。パソコンが古くなったらキーボードの接触に気をつけなければですね。
Posted by 石川通隆 at 2017/10/06 21:52
コメントありがとうございます。
Windowsでも、Linuxでも、ブルーライトカットは手放せません。
長い付き合いです。 (^o^)
Posted by 管理人 at 2017/10/07 03:21
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ