回答編集履歴
1
バグ修正
test
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
書いてみましたが、こんな感じでしょうか
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
コメントで頂いた部分を取り込んだのとバグっていた部分を修正してみました。
|
|
4
|
-
|
|
5
|
-
良いのかちょっと不安ですが…
|
|
6
2
|
|
|
7
3
|
|
|
8
4
|
|
|
9
5
|
```javascript
|
|
6
|
+
|
|
7
|
+
const yougo_area = document.getElementById('sample_area');
|
|
8
|
+
|
|
9
|
+
const yougo_parts = document.getElementsByClassName('sample_part');
|
|
10
|
+
|
|
11
|
+
const input = document.getElementById('search_word');
|
|
12
|
+
|
|
13
|
+
|
|
10
14
|
|
|
11
15
|
document.getElementById("search_word").addEventListener('input', (event) => {
|
|
12
16
|
|
|
@@ -16,13 +20,13 @@
|
|
|
16
20
|
|
|
17
21
|
|
|
18
22
|
|
|
19
|
-
console.log(sword);
|
|
23
|
+
console.log("original search = ", sword);
|
|
20
24
|
|
|
21
25
|
|
|
22
26
|
|
|
23
27
|
if (sword == '') { return }
|
|
24
28
|
|
|
25
|
-
const regexp = new RegExp(`(?<=>)[^<>]*?(
|
|
29
|
+
const regexp = new RegExp(`(?<=>)[^<>]*?(.*)[^<>]*?(?=<)`, 'gi'); // タグ自体を書き換えないようにする為の正規表現
|
|
26
30
|
|
|
27
31
|
|
|
28
32
|
|
|
@@ -34,43 +38,43 @@
|
|
|
34
38
|
|
|
35
39
|
|
|
36
40
|
|
|
37
|
-
le
|
|
41
|
+
console.log(hiragana, katakana);
|
|
42
|
+
|
|
43
|
+
console.log(`(${hiragana}|${katakana})`)
|
|
44
|
+
|
|
45
|
+
const regexp2 = new RegExp(`(${hiragana}|${katakana})`, 'gi');
|
|
38
46
|
|
|
39
47
|
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
[...yougo_parts].forEach(part => {
|
|
42
50
|
|
|
43
|
-
|
|
51
|
+
[regexp2].forEach(function (rex) {
|
|
44
52
|
|
|
45
53
|
|
|
46
54
|
|
|
47
|
-
|
|
55
|
+
part.innerHTML = part.innerHTML.replace(regexp, function (text) {
|
|
48
56
|
|
|
49
|
-
|
|
57
|
+
// console.log("replace " , text);
|
|
58
|
+
|
|
59
|
+
let orgText = text;
|
|
60
|
+
|
|
61
|
+
orgText = orgText.replace(rex, (match) => { return `<span class="highlight scroll">${match}</span>` });
|
|
50
62
|
|
|
51
63
|
|
|
52
64
|
|
|
53
|
-
|
|
65
|
+
return orgText;
|
|
54
66
|
|
|
55
|
-
|
|
67
|
+
});
|
|
56
68
|
|
|
57
|
-
let orgText = text;
|
|
58
|
-
|
|
59
|
-
orgText = orgText.replace(rex, (match) => { return `<span class="highlight scroll">${match}</span>` });
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
return orgText;
|
|
64
|
-
|
|
65
|
-
|
|
69
|
+
});
|
|
66
|
-
|
|
67
|
-
|
|
68
70
|
|
|
69
71
|
});
|
|
70
72
|
|
|
71
73
|
|
|
72
74
|
|
|
73
|
-
// chrome ではDOMの再描画を待たないと動かない
|
|
75
|
+
// chrome ではDOMの再描画を待たないと動かないようだ。
|
|
76
|
+
|
|
77
|
+
// 動作中にテキスト入力を行うと移動がキャンセルされる
|
|
74
78
|
|
|
75
79
|
setTimeout(function () {
|
|
76
80
|
|
|
@@ -98,7 +102,7 @@
|
|
|
98
102
|
|
|
99
103
|
|
|
100
104
|
|
|
101
|
-
function
|
|
105
|
+
function katakanaToHiragana(str) {
|
|
102
106
|
|
|
103
107
|
return str.replace(/[\u30a1-\u30f6]/g, function(match) {
|
|
104
108
|
|
|
@@ -112,7 +116,7 @@
|
|
|
112
116
|
|
|
113
117
|
|
|
114
118
|
|
|
115
|
-
function
|
|
119
|
+
function hiraganaToKatakana(str) {
|
|
116
120
|
|
|
117
121
|
return str.replace(/[\u3041-\u3096]/g, function(match) {
|
|
118
122
|
|