質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.21%

JSで指定した文字を指定した画像に置き換えたいです。

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 2,721

ByronHasegawa

score 263

指定した文字を指定した画像に置き換えたいです。

例: 「人」という文字があるところは「img/people.jpg」の画像に置換されるようにしたい。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

jQuery使ってますが、いかがでしょうか
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <script>
    (function($){
      $(function(){
        var bodyText = $("body").html();
        var img = '<img src="img/people.jpg">';
        $("body").html(bodyText.replace(/人/g,img));
      });
    })(jQuery);
  </script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/15 17:32

    ありがとうございます!!!

    できました!

    キャンセル

0

Yousuckさんの方法は内部的にinnerHTMLを利用している(と予想される)やり方で、
処理負荷が高く、JavaScriptのイベント等が削除されてしまい問題です。

以下のコードは、長いですが負荷も小さく、問題になりにくいコードとなります。

/**
 * 特定の要素の子孫要素にあたるテキストノードの全てに対して処理を行う
 * @see http://stackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes#answer-2579869
 *
 * @param {Node} target 子孫要素を取得する要素
 * @param {function(Node)} callback コールバック関数。第一引数には見つかったテキストノードが渡される
 */
var forTextNodes = function (target, callback) {
    var callback_run = function (textNodes, callback) {
        for (var i = textNodes.length; i--;) {
            var text_node = textNodes[i];
            var parent = text_node.parentNode;
            var parent_tagName = parent.tagName.toLowerCase();
            if (!(
                parent.nodeType === 1 &&
                (
                    parent_tagName === 'textarea' ||
                    parent_tagName === 'template'
                )
            )) {
                callback(text_node);
            }
        }
    };

    if (document.createTreeWalker && window.NodeFilter && ('SHOW_TEXT' in NodeFilter)) {
        var SHOW_TEXT = NodeFilter.SHOW_TEXT;

        try {
            document.createTreeWalker(document.body, SHOW_TEXT, null, false);

            /**
             * TreeWalker
             */
            (forTextNodes = function (target, callback) {
                var textNodes = [];
                var walker = document.createTreeWalker(target, SHOW_TEXT, null, false);

                var node;
                while (node = walker.nextNode()) {
                    textNodes[textNodes.length] = node;
                }

                callback_run(textNodes, callback);
            })(target, callback);

            return;
        } catch (e) { }
    }

    /**
     * Iterative Tree Traversal
     */
    (forTextNodes = function (target, callback) {
        var textNodes = [];

        var node = target.firstChild;
        while (node) {
            if (node.nodeType === 3) {
                textNodes[textNodes.length] = node;
            }

            if (node.hasChildNodes()) {
                node = node.firstChild;
            } else {
                while (!node.nextSibling && node !== target) {
                    node = node.parentNode;
                }
                node = node.nextSibling;
            }
        }

        callback_run(textNodes, callback);
    })(target, callback);
};

/**
 * 文字列を別の文字列、あるいはDOM要素に置換する
 *
 * @param {string} search_str 置換元の文字列
 * @param {string|Node|NodeList|Array.<Node>} replace 置換する文字列、DOM要素、DOM NodeListオブジェクト、あるいはDOM要素で構成された配列
 */
function replaceTextNode(search_str, replace) {
    if (replace.cloneNode) {
        /* Node */
        replace = [replace];
    } else {
        if (!(
            (typeof replace.length === 'number' && replace.item) ||
            Object.prototype.toString.call(replace) === '[object Array]'
        )) {
            /* string */
            replace = [document.createTextNode('' + replace)];
        }
    }

    forTextNodes(document.body, function (text_node) {
        var text = text_node.nodeValue;
        if (text.indexOf(search_str) !== -1) {
            var parent = text_node.parentNode;

            var text_list = text.split(search_str);
            for (var i = text_list.length; i--;) {
                var t = text_list[i];

                if ((i + 1) in text_list) {
                    for (var j = replace.length; j-- ;) {
                        parent.insertBefore(
                            replace[j].cloneNode(false),
                            text_node.nextSibling
                        );
                    }
                }

                if (t !== '') {
                    parent.insertBefore(
                        document.createTextNode(t),
                        text_node.nextSibling
                    );
                }
            }

            parent.removeChild(text_node);
        }
    });
}

/**
 * HTML文字列からDOM要素を生成する
 *
 * @param {string} html_str HTML文字列
 * @return {NodeList} 生成したDOM要素を含むNodeListオブジェクト
 */
var stringToDomNodeList = function (html_str) {
    var p = document.createElement('div');

    if (p.insertAdjacentHTML) {
        try {
            p.insertAdjacentHTML('afterbegin', 'x');

            return (stringToDomNodeList = function (html_str) {
                var p_ = p.cloneNode(false);
                p_.insertAdjacentHTML('afterbegin', html_str);
                return p_.childNodes;
            })(html_str);
        } catch (e) { }
    }

    return (stringToDomNodeList = function (html_str) {
        var p_ = p.cloneNode(false);
        p_.innerHTML = html_str;
        return p_.childNodes;
    })(html_str);
};

/* ***** */

/**
 * 「人」を画像に置換する
 * 置換先の画像は文字列ではなくHTMLなので、
 * stringToDomNodeList関数で変換する
 */
replaceTextNode(
    '人',
    stringToDomNodeList('<img src="img/people.jpg">')
);

// 画像にしか置換しないなら、以下のようにDOM要素を生成する方法のほうが良い
/*
var replace_node = document.createElement('img');
replace_node.src = 'img/people.jpg';

replaceTextNode(
    '人',
    replace_node
);
*/

jQueryなどにも依存していないので、単体で利用できます。

ただし、jQueryのようにhead要素(headタグ)内に配置すると動作しないかも知れません。
onloadの後に実行するようにするか、body要素(bodyタグ)内の一番下に配置した方が良いでしょう。
jQueryと併用するなら、$(function(){ … });内に配置しても構いません。

参考: javascript - getElementsByTagName() equivalent for textNodes - Stack Overflow

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る