履歴の残る検索置換

公開日: : 最終更新日:2014/04/05 JavaScript

データの整理をしていたら昔のソースコードがでてきた。
しかもDOMの操作でjQuery使わなかったから面倒だった気がする。

サンプルデータ

履歴の残る検索置換

HTML

<h1>履歴の残る検索置換</h1>
<div id="searchBox">
<div style="border:1px solid #DDD;">
<textarea id="str" name="str" rows="4" cols="80">ここに検索置換する文章を入力してください</textarea>
<p>
    検索する文字 <input type="text" name="search" value="" /><br />
置換する文字 <input type="text" name="replace" value="" />
</p>
</div>
<div id="resultbox"></div>
<p>
    <input type="button" value="置換する" onclick="check()" />
    <input type="button" value="戻る" onclick="back()" />
    <input type="button" value="リセット" onclick="reset()" />
</p>
</div>

JavaScript

var tmp = []; //置換で得た文字列を保存する配列
function check() {
    var textareaStr = '';
    if (document.getElementById("resultbox").childNodes.length === 0) {
        //最初だけtextareaから文字列を取得
        var strElm = document.getElementById('str');
        textareaStr = strElm.value;
        //textareaを入力不可に
        strElm.readOnly = true;
    } else {
        //2回目以降は置換で得た文字列を取得
        textareaStr = tmp[tmp.length-1];
    }
    //最後の検索用文字列取得
    var searchElms = document.getElementsByName("search");
    var searchElm = searchElms.item(searchElms.length - 1);
    var search = searchElm.value;
    //検索用文字列を入力不可に
    searchElm.readOnly = true;

    //最後の置換用文字列取得
    var replaceElms = document.getElementsByName("replace");
    var replaceElm = replaceElms.item(replaceElms.length - 1);
    var replace = replaceElm.value;
    //置換用文字列を入力不可に
    replaceElm.readOnly = true;

    //検索用文字列と置換用文字列が空文字じゃなければ処理を行う
    if (search !== '' && replace !== '') {
        //次回使用する置換済み文字列を追加
        tmp.push(replaceAll(textareaStr, search, replace));
        //表示用のspan付き置換文字列を代入
        textareaStr = replaceAllSpan(nl2br(h(textareaStr)), nl2br(h(search)), nl2br(h(replace)));
        //次回使用する入力パーツを表示用変数に追記
        textareaStr += '<p>検索する文字 <input type="text" name="search" value="" /><br />  ';
        textareaStr += '置換する文字 <input type="text" name="replace" value="" /></p>';

        //今回の検索置換結果を表示するdiv要素を生成
        var divElm = document.createElement('div');
        //生成したdiv要素に表示用文字列を代入
        divElm.innerHTML = textareaStr;
        //生成したdiv要素に枠線をつける
        divElm.style.border = '1px solid #DDD';

        //上記で生成したdiv要素を<div id="resultbox">の最後に追加
        var resultboxElm = document.getElementById("resultbox");
        resultboxElm.appendChild(divElm);
    }
}
//履歴全消去関数
function reset() {
    //検索結果を削除
    document.getElementById("resultbox").innerHTML = '';
    //検索対象文字列を入力可能に
    var strElm = document.getElementById('str');
    strElm.readOnly = false;
    //検索・置換文字列を入力可能に
    var searchElms = document.getElementsByName("search");
    var searchElm = searchElms.item(searchElms.length - 1);
    searchElm.readOnly = false;
    var replaceElms = document.getElementsByName("replace");
    var replaceElm = replaceElms.item(replaceElms.length - 1);
    replaceElm.readOnly = false;
    //検索対象文字列管理配列リセット
    tmp = [];
}

function back() {
    //最後の結果を削除
    var resultboxElm = document.getElementById("resultbox");
    resultboxElm.removeChild(resultboxElm.lastChild);
    //最後に追加した検索対象文字列を削除
    tmp.pop();
    //検索対象文字列がなくなったら最初のtextareaを入力可能に
    if (tmp.length === 0) {
        var strElm = document.getElementById('str');
        strElm.readOnly = false;
    }
    //検索・置換文字列を入力可能に
    var searchElms = document.getElementsByName("search");
    var searchElm = searchElms.item(searchElms.length - 1);
    searchElm.readOnly = false;
    var replaceElms = document.getElementsByName("replace");
    var replaceElm = replaceElms.item(replaceElms.length - 1);
    replaceElm.readOnly = false;
}

//HTMLで意味のある記号をエスケープ
function h(str) {
    str = str.replace(/&/g, "&amp;");
    str = str.replace(/"/g, "&quot;");
    str = str.replace(/'/g, "&#039;");
    str = str.replace(/</g, "&lt;");
    str = str.replace(/>/g, "&gt;");
    return str;
}
//改行コードを<br />タグに変換する
function nl2br(str) {
    str = str.replace(/\r\n/g, "<br />");
    str = str.replace(/(\n|\r)/g, "<br />");
    return str;
}
//表示用span付置換関数(検索置換した文字列にspanタグをつけて背景を黄色にする)
function replaceAllSpan(org, search, replace) {
    return org.split(search).join('<span style="background-color:#FF0;">' + replace + '</span>');
}
//通常置換関数
function replaceAll(org, search, replace) {
    return org.split(search).join(replace);
}

window.onload = function () {
    //textareaの初期値の取り扱い
    var elm = document.getElementById('str');
    elm.onfocus = function () {
        if (elm.value == elm.defaultValue) {
            elm.value = '';
            elm.style.color = '#000';
        }
    };
    elm.onblur = function () {
        if (elm.value === '') {
            elm.value = this.defaultValue;
            elm.style.color = '#CCC';
        }
    };
};

CSS

/*textareaの初期値グレーに*/
#str {
    color: #CCC;
}
/*textareaを枠内に納まるように*/
textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

関連記事

icon_surusuru

指定位置にするするスクロール

最近のサイトでは当たり前のように実装されているするするスクロールをjQueryで書いてみる。 基本:ページトップへ戻る <a id="pagetop" href=&q...

記事を読む

icon_h

JSでhtmlspecialcarsと同じ処理をするには

JavaScriptでHTMLで意味のある記号をエスケープするにはオリジナル関数を用意する必要があります。PHPでいうhtmlspecialchars関数が用意されていません。 HTMLで意味の...

記事を読む

icon_replaceall

JSでreplaceAllと同じ処理をするには

JavaScriptで全件検索置換するにはオリジナル関数を用意する必要があります。PHPでいうreplaceAll関数が用意されていません。 全件検索置換する関数 function repla...

記事を読む

js

GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

記事を読む

js

スムーススクロールを作る – 基礎

ページトップへするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点の値:html,bodyのy座標「0」 画面に必要なパーツは? ...

記事を読む

js

計算プログラムを作る – JavaScript

2つの数字を足し算するプログラムを作ります。 必要な値は? 1つ目の数字 2つ目の数字 画面に必要なパーツは 1つ目の数字を入力するパーツ 2つ目の数字を入...

記事を読む

icon_kaiten

要素を回転させる

jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ $('#box1').animate( {'z-index': 1},//z-inde...

記事を読む

no image

jQueryの読み込み

古いIEにも対応しているjQueryの読み込み方法。 <!--[if lt IE 9]> <script src="https://code.jquery.com/jq...

記事を読む

icon_fadein

順番に画像をフェードイン表示する

ジュエリーショップのサイトを作った時のプログラム。商品写真が順番に表示されるので、目に止まりやすい気がする。 サンプルデータ HTML <...

記事を読む

js

スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,290 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      18,059 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,632 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,374 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,798 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする