指定したテキストが入力されている時に置換するためのコードを下記のように書きました。
var list={"science":"科学","chemistry":"化学"}; $("div.col1").each(function(){ for(var i in list){ $(this).text($(this).text().replace(i,list[i])); } }); });
この場合、「science」というテキストは「科学」に、chemistryは「化学」に置換されて表示されますが、
これをHTML形式に置換するにはどのようなコードを書けば実現できるでしょうか?
上のコードのvar list={ ~ }の部分を
var list={"science":"<div class="subject">科学</div>","chemistry":"<div class="subject">化学</div>"};
としても、そのままテキストで表示されてしまい、
.html()を使わなければならないと思うのですが、うまくいきません。
具体的には「science」というテキストは、<div class="subject">科学</div>
具体的には「chemistry」というテキストは、<div class="subject">化学</div>
というように書き換えしたいと思っています。
ご教授宜しくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
やりたいこととあってるか、どうかわかりませんが。。。
あと、変数iは配列の時のみにしておいた方がよいと思います。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <title>Document</title> 10</head> 11 12<body> 13 <div class="col1">science</div> 14 <div class="col1">chemistry</div> 15 <script> 16 $(function () { 17 var list = { 18 "science": "科学", 19 "chemistry": "化学" 20 }; 21 $("div.col1").each(function () { 22 for (var item in list) { 23 if (item == $(this).text()) 24 $(this).html('<div class="subject">' + list[item] + '</div>'); 25 } 26 }); 27 }); 28 </script> 29</body> 30 31</html>
修正後
html()で、htmlとして評価できます。
順番に置換していき、最後に設定すればいいと思います。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 9 <title>Document</title> 10</head> 11 12<body> 13 <div class="col1">science chemistry</div> 14 <script> 15 $(function () { 16 var list = { 17 "science": "科学", 18 "chemistry": "化学" 19 }; 20 $("div.col1").each(function () { 21 var html = $(this).html(); 22 for (var item in list) { 23 html = html.replace(item, '<div class="subject">' + list[item] + '</div>'); 24 } 25 $(this).html(html); 26 }); 27 }); 28 </script> 29</body> 30 31</html>
投稿2017/06/27 11:51
編集2017/06/29 15:32退会済みユーザー
総合スコア0
0
HTML
1<div class="col1">science and chemistry</div>
JavaScript
1 $("div.col1").each(function(index, element) { 2 var textNodes = document.evaluate('.//text()', element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 3 for (var j = 0; j < textNodes.snapshotLength; j++) { 4 var node = textNodes.snapshotItem(j); 5 var text = node.nodeValue; 6 for (var i in list) { 7 text = text.replace(i, '<div class="subject">' +list[i] + '</div>'); 8 } 9 10 $(node).replaceWith($.parseHTML(text)); 11 } 12 });
-- 6/29 追記 --
基本的には変わっていませんが、TextNode取得箇所をXPathなしで書き直してみます。
HTML
1 <div class="col1"> 2 <table> 3 <tbody> 4 <tr><td>science</td></tr> 5 <tr><td>chemistry</td></tr> 6 <tr><td>science and chemistry</td></tr> 7 </tbody> 8 </table> 9 </div>
JavaScript
1function getTextNodes(parentElement) { 2 var nodes = []; 3 $(parentElement).contents().each(function(index, element) { 4 switch (element.nodeType) { 5 case document.TEXT_NODE: 6 nodes.push(element); 7 break; 8 case document.ELEMENT_NODE: 9 nodes = nodes.concat(getTextNodes(element)); 10 break; 11 } 12 }); 13 return nodes; 14} 15 16var list = { 17 science: '<div class="subject science">科学</div>', 18 chemistry: '<div class="subject chemistry">化学</div>' 19}; 20 21$("div.col1").each(function(index, element) { 22 var nodes = getTextNodes(element); 23 for (var j = 0; j < nodes.length; j++) { 24 var node = nodes[j]; 25 var text = node.nodeValue; 26 for (var i in list) { 27 text = text.replace(i, list[i]); 28 } 29 30 $(node).replaceWith($.parseHTML(text)); 31 } 32});
投稿2017/06/28 07:13
編集2017/06/29 09:04総合スコア13749
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/29 06:57
2017/06/29 07:00
2017/06/29 07:24
2017/06/30 02:04
0
ベストアンサー
問題を誤読していましたか。
修正したコードを載せてみました。
https://jsfiddle.net/takmatz/tb41L82v/
html
1<div class="col1">science chemistry</div> 2<hr> 3<div class="col1">science</div> 4<hr> 5<div class="col1">chemistry</div> 6<hr> 7<div class="col1">science chemistry science chemistry</div>
javascript
1var list = {"science":"科学","chemistry":"化学"}; 2var keys = Object.keys(list); 3 4$("div.col1").each(function(){ 5 var $div = $(this); 6 var text = $div.text(); 7 8 keys.forEach(function (key) { 9 text = text.replace(new RegExp(key, 'g'), '<div class="subject">' + list[key] + '</div>'); 10 }); 11 12 $div.html(text); 13});
「科学」「化学」を「<div class="subject">科学</div>」「<div class="subject">化学</div>」にする場合はこんな感じかと。
https://jsfiddle.net/takmatz/n3cctm04/
javascript
1var values = ["科学", "化学"]; 2 3$("div.col1").each(function(){ 4 var $div = $(this); 5 var text = $div.text(); 6 7 values.forEach(function (value) { 8 text = text.replace(new RegExp(value, 'g'), '<div class="subject">' + value + '</div>'); 9 }); 10 11 $div.html(text); 12});
「科学」「化学」以外置き換えるつもりがないのであれば、以下のようにハードコーディングしてしまう方法も(好みではないですが。
https://jsfiddle.net/takmatz/vykjsx12/
javascript
1$("div.col1").each(function(){ 2 var $div = $(this); 3 4 var text = $div.text() 5 .replace(new RegExp('科学', 'g'), '<div class="subject">科学</div>') 6 .replace(new RegExp('化学', 'g'), '<div class="subject">化学</div>'); 7 8 $div.html(text); 9});
修正前コード
html
1<div class="subject">science</div> 2<div class="subject">chemistry</div>
javascript
1var list={"science":"科学","chemistry":"化学"}; 2$("div.subject").each(function(){ 3 var $div = $(this); 4 5 $div.text(list[$div.text()]); 6});
投稿2017/06/27 13:15
編集2017/06/29 09:30退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/29 06:28
2017/06/29 07:14
2017/06/30 02:02 編集
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/29 06:33
2017/06/29 06:41
2017/06/30 02:10 編集