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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

319閲覧

jQueryでのテキストのHTML置換

cp_cop

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/27 11:37

指定したテキストが入力されている時に置換するためのコードを下記のように書きました。

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ページで確認できます。

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cp_cop

2017/06/29 06:33

ご回答ありがとうございます。 また、コメントが遅くなり申し訳ありませんでした。 早速、教えていただいたコードで試してみたところ、希望通りに置換されていることが確認できました。 ただ、自分で作成しているHTMLでは、うまく置換されませんでした。 何かが問題だと思うので、もう一度確認してみます。 取り急ぎ、ご回答ありがとうございました。
cp_cop

2017/06/29 06:41

自作ページでうまく置換されない理由がわかりました。 教えていただいたコードを記述したHTMLページが読み込んでいるjQueryが1.11.1.min.jsのためのようです。 読み込むjQueryが1.11.1.min.jsでも動くようにすることはできますでしょうか?
cp_cop

2017/06/30 02:10 編集

たびたびのご回答本当にありがとうございます。 無事、希望通りの動きをしてくれました。 >html()で、htmlとして評価できます。 勉強になりました。 jQueryは便利ですが、私のような初心者にはなかなか覚えきれない部分もあり、見当違いのコードを書いていることがしばしばあります。 教えていただいた内容は初心者の私にはとても参考になりました。 これからも1つ1つ学習していこうと思います。 ご回答いただきありがとうございました。
guest

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
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cp_cop

2017/06/29 06:45 編集

ご回答ありがとうございます。 また、コメントが遅くなり申し訳ありませんでした。 教えていただいたコードを試してみましたが、うまくいきませんでした。
x_x

2017/06/29 07:00

上で懸念していたのは、テキストとしてHTMLのような文字列があったら、ということです
cp_cop

2017/06/29 07:24

早速のご回答ありがとうございます。 また、参考URLありがとうざいます。 >懸念していましたが、そのパターンでしょうかね? <div class="col1">の中にはテキストと、テキスト同士の間に半角スペースが入るのみとなります。 &lt;br /&gt; の改行タグなどは入りません。 教えていただいた参考ページを確認してみます。
cp_cop

2017/06/30 02:04

たびたびのご回答本当にありがとうございます。 こういったコードの書き方もあるのですね。 初心者の私にはとても参考になります。 難しい点もあり理解するにはもう少し学習が必要ですが1つ1つ学んでいこうと思います。 ご回答いただきありがとうございました。
guest

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cp_cop

2017/06/29 06:28

ご回答ありがとうございます。 また、コメントが遅くなり申し訳ありませんでした。 質問で書かせていただいたコードは <div class="col1">science chemistry</div>がDOM上で <div class="col1">科学 化学</div>と置換されますが、 これを <div class="col1">science chemistry</div>となっているところを <div class="col1"> <div class="subject">科学</div> <div class="subject">化学</div> </div> とHTMLを含んだ置換処理ができないかと思っております。
cp_cop

2017/06/29 07:14

早速のご回答ありがとうございます。 また、Edit fiddleにアップしていただきありがとうざいます。 作成しているページにコードを組み込んだところ、 まさに思い通りの動きをしてくれて無事に置換されました。 本当に助かりました。 加えて、もしよろしければでいいのですが、1つ質問させてください。 今はscienceやchemistryのテキストを科学や化学に置換し、その上でhtmlタグを付加した形で出力させていますが、 これを、ただ単純に <div class="col1">科学 化学</div>となっているものを <div class="col1"> <div class="subject">科学</div> <div class="subject">化学</div> </div> というように出力する場合にはコードはどのようになりますでしょうか? 説明が分かりにくく申し訳ないのですが、 簡単に言うと先ほどのscienceやchemistryのテキスト置換は無視していただき 単に科学や化学といったテキストを <div class="subject">科学</div> <div class="subject">化学</div> に置換する場合のコードについても教えて頂けませんでしょうか。 宜しくお願いします。
cp_cop

2017/06/30 02:02 編集

たびたびのご回答本当にありがとうございます。 無事、希望通りに置換することができました。 jQueryは便利ですが、私のような初心者にはなかなか覚えきれない部分もあり、見当違いのコードを書いていることがしばしばあります。 Tak_Matzさんに教えていただいたコードを読み返し、とても勉強になりました。 科学、化学以外にも置換するので今回はハードコーティングではないコードを採用しましたが、こちらのコードもとても勉強になりました。 本当にありがとうございました。 また、質問した時には宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問