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

Question

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

例： 「人」という文字があるところは「img/people.jpg」の画像に置換されるようにしたい。

Answer 1

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

Answer 2

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>

Comments

[ByronHasegawa]

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

できました！