teratail
回答率
85.48%
質問するログイン新規登録
トップWebサイトに関する質問WEBページ可視領域外への安定的な処理

編集履歴

質問編集履歴

10

処理能力は変ってないけど、僅かにでも見やすく...。変数名が僅かに短くなった...

2022/09/27 13:34

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,7 @@
1
1
  ### 実現したいこと
2
2
 
3
3
  汎用的に使える事を目的としたtext highlight系のスクリプトを作成しています。
4
- window.addEventListenerのloadだけではYahoo!トップページだとかYouTubeなどの縦に長いサイトに対して、途中でページが新たに継ぎ足された場合、その領域にまでは再度処理を行ってくれません。
4
+ window.addEventListenerのloadだけでは、Google画像検索ページだとかYahoo!トップページだとかYouTubeなどの縦に長いサイトに対して、途中でページが新たに継ぎ足された場合、その領域にまでは再度処理を行ってくれません。
5
5
 
6
6
  これを解消させる為に、
7
7
  `setInterval`と`setTimeout`で何回か繰り返したのちにイベントを停止させることも試みましたが、この処理がかさむほどに動作も重くなって最悪メモリが解放されます。
@@ -17,99 +17,103 @@
17
17
  ```JavaScript
18
18
 
19
19
  // const timerId = setInterval(() =>{
20
- function my_highlight_scope_() {
20
+ function _my_highlight_scope() {
21
21
  let lastClientHeight = 0;
22
- //********************************//
22
+ //------------------------------------//
23
23
 
24
24
  // load 及び Scroll の複数イベントハンドラを登録。
25
- function highlight_handleEvent_scroll(highlight_event) {
25
+ function _highlight_event_scroll() {
26
- let AD = new Array();
26
+ let _URL = new Array();
27
- let MA = new Array();
28
- let ST = new Array();
27
+ let _TXT = new Array();
28
+ let _CSS = new Array();
29
29
 
30
30
  // include (指定URL包含)
31
31
  // 正規表現を分割したいので、いったん以下の方法で改行編集してから代入
32
- let url_assign = new RegExp([
32
+ let total_url = new RegExp([
33
33
  // Google検索
34
34
  /^(.*)www.google.(co.jp|com)\/search\?q.*$/i,
35
35
  // Yahoo!トップ
36
- /|^(.*)\/\/www.yahoo.co.jp\/?$/i,
36
+ /|^(.*)\/\/www.yahoo.co.jp\/?$/i,
37
37
  // teratail
38
- /|^https?:\/\/teratail.com\/.*$/i,
38
+ /|^https?:\/\/teratail.com\/.*$/i,
39
39
  // YouTube
40
- /|^https?:\/\/www.youtube.com\/?.*$/i,
40
+ /|^https?:\/\/www.youtube.com\/?.*$/i,
41
- ].map(function(r) {
41
+ ].map((r)=> {
42
42
  return r.source
43
43
  }).join(''));
44
44
 
45
- //---------------
45
+ //-------------
46
46
  // exclude (指定URL除外 )
47
- //Google画像検索ページを除外していたが、最も執着している内容になったので急遽コメントアウト
47
+ // Google画像検索ページを除外していたが、最も執着している内容になったので急遽コメントアウト
48
48
  let url = location.href;
49
49
  // if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return;
50
50
  // if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return;
51
51
  // if (url.indexOf('&sclient=img&ei=') !== -1) return;
52
52
 
53
- let fixed_css = 'color:unset; font-weight:unset;';
53
+ let fxed_css = 'color:unset; font-weight:unset;';
54
54
 
55
55
  //ハイライトその1
56
- AD.push(url_assign);
56
+ _URL.push(total_url);
57
- MA.push(/(JavaScript)/i); //任意のhighlightしたい単語を指定。
57
+ _TXT.push(/(JavaScript)/i); //任意のhighlightしたい単語を指定。
58
58
  // パステルブルー
59
- ST.push('background:#00CCFF;' + fixed_css);
59
+ _CSS.push('background:#00CCFF;' + fxed_css);
60
- //---------------
60
+ //-------------
61
61
 
62
62
  //ハイライトその2
63
- AD.push(url_assign);
63
+ _URL.push(total_url);
64
- MA.push(/(chrome)/i);
64
+ _TXT.push(/(chrome)/i);
65
65
  // エメラルドグリーン
66
- ST.push('background:#2fffb4;' + fixed_css);
66
+ _CSS.push('background:#2fffb4;' + fxed_css);
67
- //---------------
67
+ //-------------
68
68
 
69
69
  //ハイライトその3
70
- AD.push(url_assign);
70
+ _URL.push(total_url);
71
- MA.push(/(firefox)/i);
71
+ _TXT.push(/(firefox)/i);
72
72
  // オレンジ色
73
- ST.push('background:#FFA45DFF;' + fixed_css);
73
+ _CSS.push('background:#FFA45DFF;' + fxed_css);
74
- //---------------
74
+ //-------------
75
75
 
76
- //********************************//
76
+ //------------------------------------//
77
77
 
78
- //if(lastClientHeight !== (document.body.clientHeight)||(document.documentElement.clientHeight)){
78
+ // if(lastClientHeight !== (document.body.clientHeight)||(document.documentElement.clientHeight)){
79
79
  if (lastClientHeight !== (document.body.clientHeight)) {
80
80
 
81
- //********************************//
81
+ //------------------------------------//
82
82
 
83
- for (ind in AD) {
83
+ for (ind in _URL) {
84
- if (AD[ind].test(window.location.href) == true) {
84
+ if (_URL[ind].test(window.location.href) == true) {
85
85
  for (let tx = document.evaluate('//text()[normalize-space(.)!=""]', document, null, 6, null), t, i = 0; t = tx.snapshotItem(i); i++) {
86
86
  let before = t.textContent,
87
87
  st, matched = false;
88
+
88
89
  // 特定のtag要素は除外する
89
90
  // ブックマーク時にハイライト部分のタイトルが消滅するので <TITLE> 除外
90
91
  // コピペするときに消滅するので <TEXTAREA> <INPUT> を除外
91
- if (
92
+ if(
92
- t.parentNode.tagName == 'STYLE' || t.parentNode.tagName == 'SCRIPT' ||
93
+ t.parentNode.tagName=='STYLE'||t.parentNode.tagName=='SCRIPT'||
94
+ t.parentNode.tagName=='TITLE'||t.parentNode.tagName=='META'||
93
- t.parentNode.tagName == 'TITLE' || t.parentNode.tagName == 'TEXTAREA' || t.parentNode.tagName == 'INPUT' ||
95
+ t.parentNode.tagName=='TEXTAREA'||t.parentNode.tagName=='INPUT'||
94
- t.parentNode.tagName == 'VIDEO' || t.parentNode.tagName == 'IMG' // ||
96
+ t.parentNode.tagName=='VIDEO'||t.parentNode.tagName=='IMG' // ||
95
- ) continue;
97
+ ) continue;
98
+
96
- while ((st = before.search(MA[ind])) != -1) {
99
+ while ((st = before.search(_TXT[ind])) != -1) {
97
100
  t.parentNode.insertBefore(document.createTextNode(before.substr(0, st)), t);
98
101
 
99
- let element_c = document.createElement('span');
102
+ let elem_s = document.createElement('span');
100
103
  // 自作したspan要素にclass名付与
101
- element_c.className = 'highlight_color';
104
+ elem_s.className = 'highlight_color';
102
- t.parentNode.appendChild(element_c);
105
+ t.parentNode.appendChild(elem_s);
103
106
 
104
107
  with(t.parentNode.insertBefore(document.createElement('span'), t))
105
108
  textContent = RegExp.$1,
106
- style.cssText = ST[ind];
109
+ style.cssText = _CSS[ind];
107
110
 
111
+ //↓これで選択範囲と競合しない
108
112
  if (window.getSelection().toString()) {
109
- ST.remove();
113
+ _CSS.remove();
110
- } // ←これで選択範囲と競合しない
114
+ }
111
115
 
112
- // element_c.classList.add("notranslate");
116
+ // elem_s.classList.add("notranslate");
113
117
  matched = true;
114
118
  // 否定処理？
115
119
  before = before.substr(st + RegExp.$1.length);
@@ -120,26 +124,26 @@
120
124
  }
121
125
  }
122
126
 
123
- //********************************//
127
+ //------------------------------------//
124
128
 
125
129
  // body要素の可視部の高さが0だった場合イベントを初期化します。
126
130
  init();
127
131
  // 直前の高さを保持し直す
128
132
  lastClientHeight = document.body.clientHeight;
129
- //||document.documentElement.clientHeight;
133
+ // ||document.documentElement.clientHeight;
130
134
 
131
135
  } // body要素の可視部の高さが0だった場合、イベント再起。
132
136
  update();
133
137
 
134
- //********************************//
138
+ //------------------------------------//
135
139
 
136
140
  };
137
- window.addEventListener('load', highlight_handleEvent_scroll, false);
141
+ window.addEventListener('load', _highlight_event_scroll, false);
138
- window.addEventListener('scroll', highlight_handleEvent_scroll, false);
142
+ window.addEventListener('scroll', _highlight_event_scroll, false);
139
- // window.addEventListener('wheel', highlight_handleEvent, false);
143
+ // window.addEventListener('wheel', _highlight_event_scroll, false);
140
- //********************************//
144
+ //------------------------------------//
141
145
  };
142
- my_highlight_scope_();
146
+ _my_highlight_scope();
143
147
 
144
148
  // },1500);
145
149
  // setTimeout(() => { clearInterval(timerId); //alert('stop');
WebサイトJavaScriptjQueryHTMLCSS

9

YouTubeよりもGoogle画像検索ページの方に執着した為

2022/09/23 08:49

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
  https://blog.ikappio.com/check-page-height-change-with-javascript/#イベントリスナーで高さをチェックする
10
10
 
11
- こちら様のサイトを参考にして、カスタマイズしてみたのですがYouTubeなどでは反応しないか、反応したとしてもScroll動作などが重くなってしまいます。
11
+ こちら様のサイトを参考にして、カスタマイズしてみたのですがGoogle画像検索タブページやYouTubeなどでは反応しないか、反応したとしてもScroll動作などが重くなってしまいます。
12
12
 
13
- YouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく可視領域外にも安定的に処理を反映させるいい方法はないでしょうか？
13
+ Google画像検索タブページやYouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく可視領域外にも安定的に処理を反映させるいい方法はないでしょうか？
14
14
 
15
15
  ### 該当のソースコード
16
16
 
@@ -43,11 +43,12 @@
43
43
  }).join(''));
44
44
 
45
45
  //---------------
46
- // exclude (指定URL除外 )
46
+ // exclude (指定URL除外 )
47
+ //Google画像検索ページを除外していたが、最も執着している内容になったので急遽コメントアウト
47
48
  let url = location.href;
48
- if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return;
49
+ // if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return;
49
- if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return;
50
+ // if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return;
50
- if (url.indexOf('&sclient=img&ei=') !== -1) return;
51
+ // if (url.indexOf('&sclient=img&ei=') !== -1) return;
51
52
 
52
53
  let fixed_css = 'color:unset; font-weight:unset;';
53
54
 
@@ -166,4 +167,5 @@
166
167
  とは言え、私が作成したもの以上に素晴らしい回答が付く可能性も考えてこのままにしておきます。
167
168
  私の方法は汎用的なものとYouTube専用のものとを分けざるを得ない書き方です。
168
169
  できれば両方とも使えるようにまとめられれば望ましいと考えています。
170
+
169
171
  あとGoogle画像ページだけは綺麗に処理できない。YouTube以上に難しいです...
WebサイトJavaScriptjQueryHTMLCSS

8

追記

2022/09/22 18:12

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -166,3 +166,4 @@
166
166
  とは言え、私が作成したもの以上に素晴らしい回答が付く可能性も考えてこのままにしておきます。
167
167
  私の方法は汎用的なものとYouTube専用のものとを分けざるを得ない書き方です。
168
168
  できれば両方とも使えるようにまとめられれば望ましいと考えています。
169
+ あとGoogle画像ページだけは綺麗に処理できない。YouTube以上に難しいです...
WebサイトJavaScriptjQueryHTMLCSS

7

追記

2022/09/21 10:01

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -162,6 +162,7 @@
162
162
 
163
163
  9/21 18:30頃 追記
164
164
  なんとかYouTubeで安定的にhighlightする方法を編み出しました。
165
+ consoleログのエラーも抑えました。上記のコード内容とは少々違うけどね...
165
166
  とは言え、私が作成したもの以上に素晴らしい回答が付く可能性も考えてこのままにしておきます。
166
167
  私の方法は汎用的なものとYouTube専用のものとを分けざるを得ない書き方です。
167
168
  できれば両方とも使えるようにまとめられれば望ましいと考えています。
WebサイトJavaScriptjQueryHTMLCSS

6

「補足情報の追記」素晴らしい回答者に巡り合えることを以後期待

2022/09/21 09:34

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -155,6 +155,13 @@
155
155
 
156
156
  ### 補足情報（FW/ツールのバージョンなど）
157
157
 
158
+
158
159
  9/19 23:40頃 補足
159
160
  指定URL包含の仕方が正しくなかった（余計なサイトもincludeしていた）ので、大まかにその部分だけ修正しました。
160
161
 
162
+
163
+ 9/21 18:30頃 追記
164
+ なんとかYouTubeで安定的にhighlightする方法を編み出しました。
165
+ とは言え、私が作成したもの以上に素晴らしい回答が付く可能性も考えてこのままにしておきます。
166
+ 私の方法は汎用的なものとYouTube専用のものとを分けざるを得ない書き方です。
167
+ できれば両方とも使えるようにまとめられれば望ましいと考えています。
WebサイトJavaScriptjQueryHTMLCSS

5

自分好みの正規表現の書き方じゃなかった...だけ

2022/09/19 16:18

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -31,13 +31,13 @@
31
31
  // 正規表現を分割したいので、いったん以下の方法で改行編集してから代入
32
32
  let url_assign = new RegExp([
33
33
  // Google検索
34
- /^(.*)www.google.(co.jp|com)\/search\?q.*$|/
34
+ /^(.*)www.google.(co.jp|com)\/search\?q.*$/i,
35
35
  // Yahoo!トップ
36
- , /^(.*)\/\/www.yahoo.co.jp\/?$|/
36
+ /|^(.*)\/\/www.yahoo.co.jp\/?$/i,
37
37
  // teratail
38
- , /^https?:\/\/teratail.com\/.*$|/
38
+ /|^https?:\/\/teratail.com\/.*$/i,
39
39
  // YouTube
40
- , /^https?:\/\/www.youtube.com\/?.*$/i
40
+ /|^https?:\/\/www.youtube.com\/?.*$/i,
41
41
  ].map(function(r) {
42
42
  return r.source
43
43
  }).join(''));
WebサイトJavaScriptjQueryHTMLCSS

4

漢字違い

2022/09/19 15:05

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  こちら様のサイトを参考にして、カスタマイズしてみたのですがYouTubeなどでは反応しないか、反応したとしてもScroll動作などが重くなってしまいます。
12
12
 
13
- YouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく歌詞領域外にも安定的に処理を反映させるいい方法はないでしょうか？
13
+ YouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく可視領域外にも安定的に処理を反映させるいい方法はないでしょうか？
14
14
 
15
15
  ### 該当のソースコード
16
16
 
WebサイトJavaScriptjQueryHTMLCSS

3

日付間違いです

2022/09/19 14:47

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -155,6 +155,6 @@
155
155
 
156
156
  ### 補足情報（FW/ツールのバージョンなど）
157
157
 
158
- 9/9 23:40頃 補足
158
+ 9/19 23:40頃 補足
159
159
  指定URL包含の仕方が正しくなかった（余計なサイトもincludeしていた）ので、大まかにその部分だけ修正しました。
160
160
 
WebサイトJavaScriptjQueryHTMLCSS

2

正規表現を編集しやすく改行していたが、それまでのコード内容が意図した処理になっていなかったため。

2022/09/19 14:44

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -10,128 +10,139 @@
10
10
 
11
11
  こちら様のサイトを参考にして、カスタマイズしてみたのですがYouTubeなどでは反応しないか、反応したとしてもScroll動作などが重くなってしまいます。
12
12
 
13
- YouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく処理を反映させるいい方法はないでしょうか？
13
+ YouTubeなどでもScrollの動作や画面表示などに悪影響を与えることなく歌詞領域外にも安定的に処理を反映させるいい方法はないでしょうか？
14
14
 
15
15
  ### 該当のソースコード
16
16
 
17
17
  ```JavaScript
18
18
 
19
- // const timerId = setInterval(() =>{
19
+ // const timerId = setInterval(() =>{
20
- function my_highlight_scope_() {
20
+ function my_highlight_scope_() {
21
- let lastClientHeight = 0;
21
+ let lastClientHeight = 0;
22
- //********************************//
22
+ //********************************//
23
23
 
24
- // load 及び Scroll の複数イベントハンドラを登録。
24
+ // load 及び Scroll の複数イベントハンドラを登録。
25
- function highlight_handleEvent_scroll(highlight_event) {
25
+ function highlight_handleEvent_scroll(highlight_event) {
26
- let AD = new Array();
26
+ let AD = new Array();
27
- let MA = new Array();
27
+ let MA = new Array();
28
- let ST = new Array();
28
+ let ST = new Array();
29
29
 
30
- // include (指定URL包含 )
30
+ // include (指定URL包含)
31
+ // 正規表現を分割したいので、いったん以下の方法で改行編集してから代入
32
+ let url_assign = new RegExp([
33
+ // Google検索
31
- let url_assign = /^(.*)www.google.(co.jp|com)\/search\?q.*$/;
34
+ /^(.*)www.google.(co.jp|com)\/search\?q.*$|/
35
+ // Yahoo!トップ
36
+ , /^(.*)\/\/www.yahoo.co.jp\/?$|/
37
+ // teratail
32
- url_assign = /|^(.*)\/\/www.yahoo.co.jp\/?$|(^https?:\/\/teratail.com\/.*$)/;
38
+ , /^https?:\/\/teratail.com\/.*$|/
39
+ // YouTube
33
- url_assign = /|^https?:\/\/www.youtube.com\/?.*$/i;
40
+ , /^https?:\/\/www.youtube.com\/?.*$/i
34
- //---------------
35
- // exclude (指定URL除外 )
36
- let url = location.href;
41
+ ].map(function(r) {
37
- if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return;
38
- if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return;
42
+ return r.source
39
- if (url.indexOf('&sclient=img&ei=') !== -1) return;
43
+ }).join(''));
40
44
 
45
+ //---------------
46
+ // exclude (指定URL除外 )
47
+ let url = location.href;
48
+ if (url.search(/.*&source=lnms\&tbm=isch\&.*/) !== -1) return;
49
+ if (url.search(/.*&tbm=isch\&(source|ved|sa)=.*/) !== -1) return;
41
- let fixed_css = 'color:unset; font-weight:unset;';
50
+ if (url.indexOf('&sclient=img&ei=') !== -1) return;
42
51
 
43
- //ハイライトその1
44
- AD.push(url_assign);
45
- MA.push(/(JavaScript)/i); //任意のhighlightしたい単語を指定。
52
+ let fixed_css = 'color:unset; font-weight:unset;';
46
- // パステルブルー
47
- ST.push('background:#00CCFF;' + fixed_css); //style applied to text
48
- //---------------
49
53
 
50
- //ハイライトその2
54
+ //ハイライトその1
51
- AD.push(url_assign);
55
+ AD.push(url_assign);
52
- MA.push(/(chrome)/i);
56
+ MA.push(/(JavaScript)/i); //任意のhighlightしたい単語を指定。
53
- // エメラルドグリーン
57
+ // パステルブルー
54
- ST.push('background:#2fffb4;' + fixed_css);
58
+ ST.push('background:#00CCFF;' + fixed_css);
55
- //---------------
59
+ //---------------
56
60
 
57
- //ハイライトその3
61
+ //ハイライトその2
58
- AD.push(url_assign);
62
+ AD.push(url_assign);
59
- MA.push(/(firefox)/i);
63
+ MA.push(/(chrome)/i);
60
- // オレンジ色
64
+ // エメラルドグリーン
61
- ST.push('background:#FFA45DFF;' + fixed_css);
65
+ ST.push('background:#2fffb4;' + fixed_css);
62
- //---------------
66
+ //---------------
63
67
 
68
+ //ハイライトその3
69
+ AD.push(url_assign);
70
+ MA.push(/(firefox)/i);
71
+ // オレンジ色
64
- //********************************//
72
+ ST.push('background:#FFA45DFF;' + fixed_css);
73
+ //---------------
65
74
 
66
- //if(lastClientHeight !== (document.body.clientHeight)||(document.documentElement.clientHeight)){
67
- if (lastClientHeight !== (document.body.clientHeight)) {
75
+ //********************************//
68
76
 
77
+ //if(lastClientHeight !== (document.body.clientHeight)||(document.documentElement.clientHeight)){
69
- //********************************//
78
+ if (lastClientHeight !== (document.body.clientHeight)) {
70
79
 
71
- for (ind in AD) {
72
- if (AD[ind].test(window.location.href) == true) {
73
- for (let tx = document.evaluate('//text()[normalize-space(.)!=""]', document, null, 6, null), t, i = 0; t = tx.snapshotItem(i); i++) {
74
- let before = t.textContent,
75
- st, matched = false;
76
- // 特定のtag要素は除外する
77
- // ブックマーク時にハイライト部分のタイトルが消滅するので <TITLE> 除外
80
+ //********************************//
78
- // コピペするときに消滅するので <TEXTAREA> <INPUT> を除外
79
- if (
80
- t.parentNode.tagName == 'STYLE' || t.parentNode.tagName == 'SCRIPT' ||
81
- t.parentNode.tagName == 'TITLE' || t.parentNode.tagName == 'TEXTAREA' || t.parentNode.tagName == 'INPUT' ||
82
- t.parentNode.tagName == 'VIDEO' || t.parentNode.tagName == 'IMG' // ||
83
- ) continue;
84
- while ((st = before.search(MA[ind])) != -1) {
85
- t.parentNode.insertBefore(document.createTextNode(before.substr(0, st)), t);
86
81
 
82
+ for (ind in AD) {
87
- let element_c = document.createElement('span');
83
+ if (AD[ind].test(window.location.href) == true) {
84
+ for (let tx = document.evaluate('//text()[normalize-space(.)!=""]', document, null, 6, null), t, i = 0; t = tx.snapshotItem(i); i++) {
85
+ let before = t.textContent,
86
+ st, matched = false;
88
- // 自作したspan要素にclass名付与
87
+ // 特定のtag要素は除外する
88
+ // ブックマーク時にハイライト部分のタイトルが消滅するので <TITLE> 除外
89
+ // コピペするときに消滅するので <TEXTAREA> <INPUT> を除外
90
+ if (
89
- element_c.className = 'highlight_color';
91
+ t.parentNode.tagName == 'STYLE' || t.parentNode.tagName == 'SCRIPT' ||
92
+ t.parentNode.tagName == 'TITLE' || t.parentNode.tagName == 'TEXTAREA' || t.parentNode.tagName == 'INPUT' ||
93
+ t.parentNode.tagName == 'VIDEO' || t.parentNode.tagName == 'IMG' // ||
94
+ ) continue;
90
- t.parentNode.appendChild(element_c);
95
+ while ((st = before.search(MA[ind])) != -1) {
96
+ t.parentNode.insertBefore(document.createTextNode(before.substr(0, st)), t);
91
97
 
92
- with(t.parentNode.insertBefore(document.createElement('span'), t))
98
+ let element_c = document.createElement('span');
99
+ // 自作したspan要素にclass名付与
100
+ element_c.className = 'highlight_color';
93
- textContent = RegExp.$1,
101
+ t.parentNode.appendChild(element_c);
94
- style.cssText = ST[ind];
95
102
 
96
- if (window.getSelection().toString()) {
103
+ with(t.parentNode.insertBefore(document.createElement('span'), t))
97
- ST.remove();
98
- } // ←これで選択範囲と競合しない
104
+ textContent = RegExp.$1,
105
+ style.cssText = ST[ind];
99
106
 
100
- // element_c.classList.add("notranslate");
107
+ if (window.getSelection().toString()) {
101
- matched = true;
108
+ ST.remove();
102
- // 否定処理？
109
+ } // ←これで選択範囲と競合しない
103
- before = before.substr(st + RegExp.$1.length);
104
- if (matched) t.textContent = before;
105
110
 
111
+ // element_c.classList.add("notranslate");
106
- }
112
+ matched = true;
107
- }
113
+ // 否定処理？
114
+ before = before.substr(st + RegExp.$1.length);
108
- }
115
+ if (matched) t.textContent = before;
109
- }
110
116
 
111
- //********************************//
117
+ }
118
+ }
119
+ }
120
+ }
112
121
 
113
- // body要素の可視部の高さが0だった場合イベントを初期化します。
114
- init();
115
- // 直前の高さを保持し直す
116
- lastClientHeight = document.body.clientHeight;
117
- //||document.documentElement.clientHeight;
122
+ //********************************//
118
123
 
119
- } // body要素の可視部の高さが0だった場合、イベント再起。
124
+ // body要素の可視部の高さが0だった場合イベントを初期化します。
120
- update();
125
+ init();
126
+ // 直前の高さを保持し直す
127
+ lastClientHeight = document.body.clientHeight;
128
+ //||document.documentElement.clientHeight;
121
129
 
122
- //********************************//
130
+ } // body要素の可視部の高さが0だった場合、イベント再起。
131
+ update();
123
132
 
124
- };
125
- window.addEventListener('load', highlight_handleEvent_scroll, false);
126
- window.addEventListener('scroll', highlight_handleEvent_scroll, false);
127
- // window.addEventListener('wheel', highlight_handleEvent, false);
128
- //********************************//
133
+ //********************************//
129
- };
130
- my_highlight_scope_();
131
134
 
135
+ };
136
+ window.addEventListener('load', highlight_handleEvent_scroll, false);
137
+ window.addEventListener('scroll', highlight_handleEvent_scroll, false);
138
+ // window.addEventListener('wheel', highlight_handleEvent, false);
139
+ //********************************//
140
+ };
141
+ my_highlight_scope_();
142
+
132
- // },1500);
143
+ // },1500);
133
- // setTimeout(() => { clearInterval(timerId); //alert('stop');
144
+ // setTimeout(() => { clearInterval(timerId); //alert('stop');
134
- // }, 30000);
145
+ // }, 30000);
135
146
 
136
147
  ```
137
148
 
@@ -144,4 +155,6 @@
144
155
 
145
156
  ### 補足情報（FW/ツールのバージョンなど）
146
157
 
158
+ 9/9 23:40頃 補足
159
+ 指定URL包含の仕方が正しくなかった（余計なサイトもincludeしていた）ので、大まかにその部分だけ修正しました。
147
160
 
WebサイトJavaScriptjQueryHTMLCSS

1

変更前^(.*)\/\/www.yahoo.co.jp?\/$　→　変更後^(.*)\/\/www.yahoo.co.jp\/?$

2022/09/19 09:29

投稿

Meli_ssa
Meli_ssa

スコア0

test CHANGED
File without changes
test CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  // include (指定URL包含 )
31
31
  let url_assign = /^(.*)www.google.(co.jp|com)\/search\?q.*$/;
32
- url_assign = /|^(.*)\/\/www.yahoo.co.jp?\/$|(^https?:\/\/teratail.com\/.*$)/;
32
+ url_assign = /|^(.*)\/\/www.yahoo.co.jp\/?$|(^https?:\/\/teratail.com\/.*$)/;
33
33
  url_assign = /|^https?:\/\/www.youtube.com\/?.*$/i;
34
34
  //---------------
35
35
  // exclude (指定URL除外 )
WebサイトJavaScriptjQueryHTMLCSS