teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追加設問への回答

2017/06/29 09:30

投稿

退会済みユーザー
answer CHANGED
@@ -28,7 +28,39 @@
28
28
  $div.html(text);
29
29
  });
30
30
  ```
31
+ ---
31
32
 
33
+ 「科学」「化学」を「<div class="subject">科学</div>」「<div class="subject">化学</div>」にする場合はこんな感じかと。
34
+ https://jsfiddle.net/takmatz/n3cctm04/
35
+ ``` javascript
36
+ var values = ["科学", "化学"];
37
+
38
+ $("div.col1").each(function(){
39
+ var $div = $(this);
40
+ var text = $div.text();
41
+
42
+ values.forEach(function (value) {
43
+ text = text.replace(new RegExp(value, 'g'), '<div class="subject">' + value + '</div>');
44
+ });
45
+
46
+ $div.html(text);
47
+ });
48
+ ```
49
+
50
+ 「科学」「化学」以外置き換えるつもりがないのであれば、以下のようにハードコーディングしてしまう方法も(好みではないですが。
51
+ https://jsfiddle.net/takmatz/vykjsx12/
52
+ ``` javascript
53
+ $("div.col1").each(function(){
54
+ var $div = $(this);
55
+
56
+ var text = $div.text()
57
+ .replace(new RegExp('科学', 'g'), '<div class="subject">科学</div>')
58
+ .replace(new RegExp('化学', 'g'), '<div class="subject">化学</div>');
59
+
60
+ $div.html(text);
61
+ });
62
+ ```
63
+
32
64
  ---
33
65
  修正前コード
34
66
  ``` html

1

回答の変更

2017/06/29 09:30

投稿

退会済みユーザー
answer CHANGED
@@ -1,6 +1,37 @@
1
- divのテキストキーにして、変数listから引っ張ってきて、テキストを置き換える、とうことょう
1
+ 問題誤読してい
2
+ 修正したコードを載せてみました。
2
3
 
4
+ https://jsfiddle.net/takmatz/tb41L82v/
5
+
3
6
  ``` html
7
+ <div class="col1">science chemistry</div>
8
+ <hr>
9
+ <div class="col1">science</div>
10
+ <hr>
11
+ <div class="col1">chemistry</div>
12
+ <hr>
13
+ <div class="col1">science chemistry science chemistry</div>
14
+ ```
15
+
16
+ ``` javascript
17
+ var list = {"science":"科学","chemistry":"化学"};
18
+ var keys = Object.keys(list);
19
+
20
+ $("div.col1").each(function(){
21
+ var $div = $(this);
22
+ var text = $div.text();
23
+
24
+ keys.forEach(function (key) {
25
+ text = text.replace(new RegExp(key, 'g'), '<div class="subject">' + list[key] + '</div>');
26
+ });
27
+
28
+ $div.html(text);
29
+ });
30
+ ```
31
+
32
+ ---
33
+ 修正前コード
34
+ ``` html
4
35
  <div class="subject">science</div>
5
36
  <div class="subject">chemistry</div>
6
37
  ```