文字編集のJavaScriptソースコード16選!HTMLとセットで覚える

この記事は約11分で読めます。

現役エンジニアがおすすめするプログラミングスクール!

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回 日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。


無料相談はこちら!


Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社(株式会社LIG)が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。


無料相談はこちら!


テックキャンプ デザイナー転職(旧:【TECH::EXPERT】デザインスクール)

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。


無料相談はこちら!


SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。


無料相談はこちら!

ポートフォリオ制作実績
JavaScriptで文字を編集のためのソースコードを紹介します。
実行結果を見るためには以下のソースコードをHTML内に貼り付けましょう。
HTMLソースコードはHTMLの記事をコピペしてきてください。
学習順番としては、①HTML→②CSS→③JavaScript→④Javaが理想的ですが、2番目の学習にJavaScriptを持ってきてもすぐ実践できるようにしています。
大学生の方もプログラミングスキルを極めて、IT就活のポートフォリオに生かしてくださいね。
スポンサーリンク

【JavaScript】文字の効果の編集

1, 文字色を指定するソースコード

.fontcolor(“”)メソッドは、文字列の色を指定してくれます。<font color=””>と全く同じです。””の中には色の名前か16進数を入れてあげましょう。
<script type=”text/javascript”>
<!–
document.write(“任意の文字色”.fontcolor(“red”));
document.write(“任意の文字色”.fontcolor(“FF0000”));
//->
</script>

2, 文字を太くするソースコード

太字の指定には.bold()メソッドを使います。
HTMLでは<b>と同じです。
<script type=”text/javascript”>
<!–
document.write(“太くする”.bold());
//->
</script>

3, 文字を斜めにするソースコード

斜体文字のプログラミングには.italics()メソッドを使います。
HTMLでは<i>と同じです。
<script type=”text/javascript”>
<!–
document.write(“斜めにする”.italics());
//->
</script>

4, 文字に複数の効果を与えるソースコード

先ほどのソースコードの文字を太字に、赤色で表示してみましょう。
<script type=”text/javascript”>
<!–
document.write(“太い・赤い・斜体”.bold().fontcolor(“red”).italics());
//->
</script>
上記をHTMLのみで記述するとこのようになります。まだシンプルですね。
<b><font color=”red”><i>太い・赤い・斜体</i></b>
スポンサーリンク

【JavaScript】文字のサイズの編集

5, 文字を拡大するソースコード

.big()メソッドは、文字列を拡大して表示してくれます。
HTMLでは<big>と同じ働きをしています。
<script type=”text/javascript”>
<!–
document.write(“拡大”.big());
//->
</script>

6, 文字を縮小するソースコード

.small()メソッドは、文字列を縮小して表示してくれます。
HTMLでは<small>と同じ働きをしています。
<script type=”text/javascript”>
<!–
document.write(“縮小”.small());
//->
</script>

7, フォントサイズを変更するソースコード

拡大したり縮小したりできても、フォントサイズを変更できなければ特に役に立ちません。
フォントサイズのプログラミングには.fontsize(10)メソッドを使います。
HTMLでは<font size =>と同じです。
<script type=”text/javascript”>
<!–
document.write(“フォントサイズ”.fontsize(10));
//->
</script>

8, 大文字と小文字の変換を有効にするソースコード

大文字を小文字に変換するためには.toLowerCase()メソッドを使います。
その逆も然り、小文字を大文字に変換するためには.toUpperCase()メソッドを使います。
<script type=”text/javascript”>
<!–
document.write(“UPDOWNTECH”.toLowerCase());
//->
</script>
または
<script type=”text/javascript”>
<!–
document.write(“updowntech”.toUpperCase());
//->
</script>
スポンサーリンク

【JavaScript】文字列の編集

9, 文字列を分割するソースコード

分割するついでに、2番目の文字列を取得してみましょう。JavaScriptの場合、実際は0から数えるので1番目の「Up」を取得します。
文字列の分割には.split()メソッドを使います。
<script type=”text/javascript”>
<!–
var mozi1 = “Hello! Up Down Tech!”;
var space = ” “;
var mozi2 = mozi1.split(space);
for(var i = 0; i < mozi2.length; i++){
document.write(mozi2[i] + ” / “);
}
document.write(“<br>”);
document.write(mozi2[1]);
//->
</script>

10, 文字の何番目かを引き出すソースコード

文字だけを引き出すためには.charAt()メソッドを使います。JavaScriptの場合、実際は0から数えるので1番目の「e」「ん」を取得します。
<script type=”text/javascript”>
<!–
var mozi1 = “Hello”;
var mozi2 = “こんにちは”;
document.write(mozi1.charAt(1));
document.write(“<br>”);
document.write(mozi2.charAt(1));
//->
</script>

11, ここからここまでの途中の文字かを引き出すソースコード

ここからここまで一定範囲の文字を引き出すには.substring()メソッドを使います。JavaScriptの場合、実際は0から数えるので「大学生」を取得します。
なお、.substr()メソッドを使う場合、.substring(7,9) = .substr(7,3)になります。つまり7文字目以降の先の文字を数えています。
両者のメソッドの扱い方は違うので注意しましょう。
<script type=”text/javascript”>
<!–
var mozi1 = “ソースコードを大学生がコピペしちゃう”;
document.write(“<br>”);
document.write(mozi1.substring(7,9));
//->
</script>
または
<script type=”text/javascript”>
<!–
var mozi1 = “ソースコードを大学生がコピペしちゃう”;
document.write(“<br>”);
document.write(mozi1.substr(7,3));
//->
</script>

12, 文字列の検索結果を取得するソースコード

文字列を前から近いほうを検索するには.indexOf()メソッド、後ろ(遠く)から近いほうを検索するには.lastIndexOf()を使います。
どちらも左の0から数えている点に注意しましょう。
文字が検索結果に含まれていない場合は-1で返してくれます。
前者のソースコードはそれぞれ「3」「-1」、後者のソースコードはそれぞれ「11」「-1」を抽出します。
<script type=”text/javascript”>
<!–
var mozi1 = “ソースコードを大学生がコピペしちゃう”;
document.write(“<br>”);
document.write(mozi1.indexOf(“コ”,0));
document.write(“<br>”);
document.write(mozi1.indexOf(“こ”,0));
//->
</script>
または
<script type=”text/javascript”>
<!–
var mozi1 = “ソースコードを大学生がコピペしちゃう”;
document.write(“<br>”);
document.write(mozi1.lastIndexOf(“コ”,17));
document.write(“<br>”);
document.write(mozi1.lastIndexOf(“こ”,17));
//->
</script>
スポンサーリンク

【JavaScript】その他の文字の編集

13, アンカーをプログラミングするソースコード

アンカー付き文字のプログラミングには.anchor()メソッドを使います。
HTMLでは<a name=””>と同じです。実行結果を確かめるために<body></body>から記述しましょう。
<body bgcolor=”#FFFFFF”>
<p>アンカーのプログラミング</p>
<script type=”text/javascript”>
<!–
document.write(“アンカー”.anchor(“updowntech”));
//->
</script>
<br><br><br>・・・<br><br><br>
<a href=”#updowntech”>アンカーのプログラミングへジャンプ</a>
</body>
リンク付き文字を表示するソースコード
リンク付き文字の指定には.link()メソッドを使います。
HTMLでは<a href=””>と同じです。
<script type=”text/javascript”>
<!–
document.write(“こちら”.link(“https://updowntech.com/”));
//->
</script>

14, 文字を等幅間隔で表示するソースコード

等幅の文字の指定には.fixed()メソッドを使います。
HTMLでは<tt>と同じです。
<script type=”text/javascript”>
<!–
document.write(“等幅”.fixed());
//->
</script>

15, 文字を線で削除するソースコード

削除文字(線)の指定には.strike()メソッドを使います。
HTMLでは<strike>と同じです。
<script type=”text/javascript”>
<!–
document.write(“文字を削除”.strike());
//->
</script>

16, 文字を上付・下付にするソースコード

上付文字は.sup()メソッド、下付文字は.sub()メソッドを使います。
HTMLでは上付文字は<sup>、下付文字は<sub>と同じです。
<script type=”text/javascript”>
<!–
document.write(“上付文字”.sup());
//->
</script>
または
<script type=”text/javascript”>
<!–
document.write(“下付文字”.sub());
//->
</script>
スポンサーリンク

 まとめ

JavaScriptはJavaやC言語とも若干コードの構造が似ています。
HTMLとともに覚えると初学者でも理解しやすいのではないでしょうか。
テストや大学などの学習で使ってみてください。
タイトルとURLをコピーしました