サクラエディタで数字Nケタの文字列を検索して$1を使った部分置換する
下記のように、数字8桁の後にタブを挿入する方法
[メニュー]から[置換]を選択します。(ctrl+r)
置換メニューが表示されます。
まず、置換前を検索
([0-9]{8})を入力します。
[0-9]で数字を検索、{n}で桁数を検索、()で囲い数字のn桁数を検索というセットが２０出来ます。
実際に検索をしてみると
検索結果後
当てはまりました。
置換後には、$1を使った置換を方法を行います。
$1とは置換文字列のことを意味します。
つまり、ここでは、([0-9]{8})で指定した値を示します。
その$1の後に、タブを挿入するということなので下記のように\tを入れます。
$1\t
それでは、実際に置換をしてみます。
【すべて置換】を実行
数字8桁の後にタブが挿入されました。
その他
$1を使った置換
下記のような、ID、名前、電話番号があるデータがあるとき、電話番号の000を080に変更する。
置換条件
置換前の条件ですが、000-の後に、\d{4}で10進数字の4桁という意味になります。
置換後に080-に指定して、$1の置換文字列を指定します。
【すべて置換】を押下後
電話番号「000-」から「080-」に置換されました。
【Java script問題集】2-4 「2-2.」からfromが同じ人の情報を括りだしてみよう
2-4.html
<html>
<head>
<title>2-4</title>
</head>
<body>
<ul id="tokyo">東京出身</ul>
<ul id="fukuoka">福岡出身</ul>
</script>
</body>
</html>
2-4.js
var members = [
{ "name": 'suzuki', "age": 27, "from": 'tokyo' },
{ "name": 'tanaka', "age": 32, "from": 'fukuoka' },
{ "name": 'takahashi', "age": 30, "from": 'fukuoka' },
{ "name": 'yamamoto', "age": 28, "from": 'tokyo' }
];
// fromがtokyoの要素の配列を返す
var tokyo_members = members.filter(item => item.from === 'tokyo');
// fromがfukuokaの要素の配列を返す
var fukuoka_members = members.filter(item => item.from === 'fukuoka');
// 東京出身メンバー情報を「名前（年齢）」の形式でリストに整形
$.each(tokyo_members,
function(s, elem) {
$('<li></li>').append(elem.name + '（' + elem.age + ')').appendTo('#tokyo');
}
);
// 福岡出身メンバー情報を「名前（年齢）」の形式でリストに整形
$.each(fukuoka_members,
function(s, elem) {
$('<li></li>').append(elem.name + '（' + elem.age + '）') .appendTo('#fukuoka');
}
);
実行結果
【Java script問題集】2-3 「2-2.」からの特定のnameを指定して、配列から削除してみよう
2-3.html
<!DOCTYPE html>
<html>
<head>
<title>2-3</title>
</head>
<body>
<ul id="result"></ul>
</body>
</html>
2-3.js
$(function() {
// 処理対象のオブジェクト配列
var members = [
{ "name": 'suzuki', "age": 27, "from": 'tokyo' },
{ "name": 'tanaka', "age": 32, "from": 'fukuoka' },
];
var targetName = 'suzuki';
members.some(function(v, i){
if (v.name==targetName) members.splice(i,1); //name:suzukiの要素を削除
});
$.each(members,
function(s, elem) {
// メンバー情報を「名前（年齢）出身」の形式でリストに整形
$('<li></li>').append(elem.name + '（' + elem.age + '）' + elem.from).appendTo('#result');
}
);
});
実行結果
【Java script問題集】2-2 ループ処理で、配列の後ろににオブジェクトを追加してみよう
2-2.html
<!DOCTYPE html>
<html>
<head>
<title>2-2</title>
</head>
<body>
<ul id="result"></ul>
</body>
</html>
2-2.js
$(function() {
// 処理対象のオブジェクト配列
var members = [
{ "name": 'suzuki', "age": 27, "from": 'tokyo' },
{ "name": 'tanaka', "age": 32, "from": 'fukuoka' },
];
// 配列membersにオブジェクト追加
members.push( { "name": 'takahashi', "age": 30, "from": 'osaka' } ) ;
$.each(members,
function(s, elem) {
// メンバー情報を「名前（年齢）出身」の形式でリストに整形
$('<li></li>').append(elem.name + '（' + elem.age + '）' + elem.from).appendTo('#result');
}
);
});
実行結果
【Java script問題集】2-1 ボタン押下時に、5秒おくれてアラート表示してみよう
2-1.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<title>2-1</title>
<body>
<div id="shiritori">
<button id="btn">ボタン押下後、5秒後にアラート表示</button>
</div>
</body>
</html>
2-1.js
$(function(){
$("#btn").click(function(){
setTimeout('alert("Hello world!")', 5000);
});
});
実行結果(ボタン押下前)
実行結果(ボタン押下5秒後)
【Java script問題集】1-12 「1-11.」で取得したli要素の値を逆順でhtml表示してみよう
1-12.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<title>1-12</title>
<body>
<div id="shiritori">
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
<li>ぱいぷ</li>
<li>ぷりん</li>
</div>
<button id="btn">切り替え</button>
</body>
</html>
1-12.js
$(function(){
$("#btn").click(function(){
$("#shiritori").html($("#shiritori li").get().reverse());
});
});
実行結果(ボタン押下前)
実行結果(ボタン押下後)
【Java script問題集】1-11 li要素の値を全て取得してみよう
1-11.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<title>1-11</title>
<body>
<div>
<ul id="shiritori">
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
<li>ぱいぷ</li>
<li>ぷりん</li>
</ul>
<div><button tydive="button">クリックで値取得！</button></div>
<p></p>
</div>
</body>
</html>
1-11.js
$(function() {
$('button').click(function() { // button要素をクリックしたら発動
var shiritori = $('#shiritori').text(); // 選択したテキストを変数に格納
$('p').text(shiritori); // p要素にテキストを出力
});
});
実行結果(ボタン押下前)
実行結果(ボタン押下後)
