山本ワールド
文字列の操作
2024年01月16日(火) 09時36分更新
項目のみ表示/展開表示の切り替え

文字列の長さを取得(length)
string.length
以下のボタンをクリックすると文字数を取得します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id1"></span>
<script type="text/javascript">
function test1(){
var s="何文字かな";
var o=document.getElementById('id1');
o.innerText="'"+s+"'は"+s.length+"文字です。";
}
</script>
<form name="test1Form">
<input type="button" value="文字数を求める" onclick="test1()" />
</form>
</body>
</html>
文字列から文字列を抜き出す。(substring,substr,slice)
string.substring(始点,終点)
string.substr(始点)
string.slice(始点,終点)
以下のボタンをクリックすると文字列を抜き出して表示します。1行目に元の文字列、2行目以降は抜き出した文字列です。
最初の1文字は0文字目と数えるので注意が必要。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id2"></span>
<script type="text/javascript">
function test2(){
var s="本日は晴天なり。";
var t=s+"<br />";
t=t+s.substring(3,5)+"<br />"; // 先頭3文字目から5文字目の手前まで晴天
t=t+s.substring(3)+"<br />"; // 先頭3文字目から最後まで晴天なり。
t=t+s.substr(-5)+"<br />"; // 最後から5文字目から最後まで 晴天なり。
t=t+s.slice(-5,-3)+"<br />"; // 最後から5文字目から最後から3文字目まで 晴天。
t=t+s.substr(5,2)+"<br />"; // 先頭から5文字目から2文字分 なり
t=t+ s.slice(-5,-3)+"<br />"; //末尾から5文字目から3文字目 晴天
var o=document.getElementById('id2');
o.innerHTML=t;
}
</script>
<form name="test2Form">
<input type="button" value="実行" onclick="test2()" />
</form>
</body>
</html>
文字の前後の不要な空白を削除(trim)
string.trim()
文字の前後の不要な空白を削除する。1行目に削除前の文字列、2行目に削除後の文字列を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id3"></pre>
<script type="text/javascript">
function test3(){
var s=" Boys, be ambitious ";
var o=document.getElementById('id3');
o.innerText=s+"\n"+s.trim();
}
</script>
<form name="test3Form">
<input type="button" value="実行" onclick="test3()" />
</form>
</body>
</html>
文字列を分割(split)
string.split(区切り文字)
以下のボタンをクリックすると,で区切られた文字列を分割します。1行目に分割前の文字列、2行目以降に分割された文字列を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id4"></pre>
<script type="text/javascript">
function test4(){
var s="10,20,30,40,50";
var o=document.getElementById('id4');
var t="";
var a=s.split(",");
for(var n=0;n<a.length;n++)
t=t+a[n]+"<br />"
o.innerHTML=t;
}
</script>
<form name="test4Form">
<input type="button" value="実行" onclick="test4()" />
</form>
</body>
</html>
連結(join)
string.join(区切り文字)
以下のボタンをクリックすると配列の文字列を指定区切り文字で連結します。配列を,で連結した文字列を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id5"></pre>
<script type="text/javascript">
function test5(){
var a=[ "12","34","56" ];
var o=document.getElementById('id5');
o.innerText=a.join(",");
}
</script>
<form name="test5Form">
<input type="button" value="実行" onclick="test5()" />
</form>
</body>
</html>
文字コードから文字を作成(fromCharCode)
String.fromCharCode(文字コード,...)
以下のボタンをクリックすると文字コード(UTF16)から文字を作成して表示します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id6"></pre>
<script type="text/javascript">
function test6(){
var o=document.getElementById('id6');
var t=String.fromCharCode(0x6f22,0x5b57);
o.innerText=t;
}
</script>
<form name="test6Form">
<input type="button" value="実行" onclick="test6()" />
</form>
</body>
</html>
文字列から文字コードを取得(charCodeAt)
string.charCodeAt(文字位置)
以下のボタンをクリックすると文字列から文字コード(UTF16)を取得して表示します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id7"></pre>
<script type="text/javascript">
function test7(){
var o=document.getElementById('id7');
var c="漢字".charCodeAt(1);
o.innerText=c.toString(16);
}
</script>
<form name="test7Form">
<input type="button" value="実行" onclick="test7()" />
</form>
</body>
</html>
文字列から文字コードを取得(charAt)
string.charAt(文字位置)
以下のボタンをクリックすると文字列から文字を取得して表示します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id8"></pre>
<script type="text/javascript">
function test8(){
var o=document.getElementById('id8');
var c="漢字".charAt(1);
o.innerText=c.toString(16);
}
</script>
<form name="test8Form">
<input type="button" value="実行" onclick="test8()" />
</form>
</body>
</html>
文字列の大文字を小文字に変換する(toLowerCase)
string.toLowerCase()
以下のボタンをクリックすると文字列に含まれる大文字を小文字に変換します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id9"></pre>
<script type="text/javascript">
function test9(){
var s="AbcDefGhi";
var o=document.getElementById('id9');
var t=s.toLowerCase();
o.innerHTML=t;
}
</script>
<form name="test9Form">
<input type="button" value="実行" onclick="test9()" />
</form>
</body>
</html>
文字列の小文字を大文字に変換する(toUpperCase)
string.toUpperCase()
以下のボタンをクリックすると文字列に含まれる大文字を小文字に変換します。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre id="id10"></pre>
<script type="text/javascript">
function test10(){
var s="AbcDefGhi";
var o=document.getElementById('id10');
var t=s.toUpperCase();
o.innerHTML=t;
}
</script>
<form name="test10Form">
<input type="button" value="実行" onclick="test10()" />
</form>
</body>
</html>
Copyright (C) 2012 山本ワールド All Rights Reserved.