ywork2020.com

Title

特定のキーワードテキストのフォントカラーを変更出来る

Keyword Font Colorの概要

jQueryコード内で指定された正規表現ワードを別の文字列(特定のclassを持つタグ)に置き換えることにより、そのclassをターゲットにスタイルシートを適用する為のプログラムです。

実機サンプル

ボタンで実行結果を表示します

ここはサンプル文です。 こんにちは。 このサイト名はYWORKと言います。 読み方はワイワークです。 現在は独学者向けのWebプログラミングのヒントや解決に繋がる情報を発信しています。 Web系はもとより、それ以外の他言語も公開を目指しますので気長に末永くよろしくお願い致します。

Keyword Font Colorの補足

プログラムの実際の動きとして特定のid、又はclass属性付きタグの中にあるキーワードテキストを、別のテキストに置き換えます。
適用前は普通のテキストだった部分を特定のidやclass属性付きタグ(例 : <TAG class="hoge">テキスト</TAG>)に置き換えることにより、 CSSで、そのidやclassに対してカラーを指定しているので実際はカラーだけでなく、大きさを変えるなど、あらゆるプロパティの適用が可能です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>独学 Webプログラミング! - YWORK</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<style>
			.classOrange{color:orange}
			.classPink{color: hotpink;}
			.classBlue{color:blue; font-size: 24px;}
			.classYellow{color:goldenrod}
			.classGreen{color: lime};
		</style>
	</head>
	<body>
		<p>ボタンで結果を表示します</p>
		<p>
			<input type="button" value="keyword font color 実行" onclick="onClick1()"><!-- #1 -->
		</p>
		<p class="classAnswer">
			こんにちは。
			このサイト名はYWORKと言います。
			読み方はワイワークです。
			現在は独学者向けのWebプログラミングのヒントや解決に繋がる情報を発信しています。
			Web系はもとより、それ以外の他言語も公開を目指しますので気長に末永くよろしく
			お願い致します。
		</p>
		<script type="text/javascript">
			document.open();
			function onClick1(){	//-- #1 --
				$('.classAnswer').each(function(){
					let txt = $(this).text();
					$(this).html(txt
						.replace(/Web/g,'<span class="classOrange">Web</span>')
						.replace(/他言語/g,'<span class="classOrange">他言語</span>')
						.replace(/CSS/g,'<span class="classPink">CSS</span>')
						.replace(/プログラム/g,'<span class="classPink">プログラム</span>')
						.replace(/YWORK/g,'<span class="classBlue">YWORK</span>')
						.replace(/特定/g,'<span class="classBlue">特定</span>')
						.replace(/キーワード/g,'<span class="classYellow">キーワード</span>')
						.replace(/プロパティ/g,'<span class="classYellow">プロパティ</span>')
						.replace(/ワイワーク/g,'<span class="classGreen">ワイワーク</span>')
						.replace(/カラー/g,'<span class="classGreen">カラー</span>')
					);
				});
			}
			document.close();
		</script>
	</body>
</html>