JSで指定した文字を指定した画像に置き換えたいです。
解決済
回答 2
投稿
- 評価
- クリップ 2
- VIEW 2,721
例: 「人」という文字があるところは「img/people.jpg」の画像に置換されるようにしたい。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
<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>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
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%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/01/15 17:32
できました!