前提・実現したいこと

ウェブブラウザ上のテキストに範囲指定して、ボタンを押すなどしてそこの文字を隠して、マウスポインタを乗せたらもとにもどす。

発生している問題・エラーメッセージ

1.マウスポインタを乗せたらもとに戻るようにする方法がわからない。
2.範囲指定して隠した状態を幾つも保存しておく方法がわからない。
3.どのように隠せばいいのかがわからない。
4.下のソースコードだと、一つ文字を隠してから、もう一つ隠すと、１つめの文字が戻ってしまい、更に+と”が残ってしまう。

該当のソースコード

javascript
1    <input type="button" value="マーカー" onclick="CountSelectedChars()">
2    <script>
3        function CountSelectedChars() {
4            var strObj = document.getElementById("text"); 
5            var SelStr = document.getSelection();
6            var regexp = new RegExp('('+SelStr+')', 'g');
7            var a = strObj.innerText.replace(regexp, `<span style="color:transparent">+"$1"+</span>`);
8            document.getElementById('text').innerHTML = a;
9        }
10    </script>

何か不足している情報などがあったら言ってください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4</head>
5<body>
6    <p id="text"><%= @text %></p>
7    <br>
8    <input type="button" value="マーカー" onclick="CountSelectedChars()">
9    <script>
10        function CountSelectedChars() {
11            var strObj = document.getElementById("text"); 
12            var SelStr = document.getSelection();
13            var regexp = new RegExp('('+SelStr+')', 'g');
14            var a = strObj.innerText.replace(regexp, `<span style="color:transparent">+"$1"+</span>`);
15            document.getElementById('text').innerHTML = a;
16        }
17    </script>
18</body>
19</html>

m.ts10806

2019/07/01 01:46 編集

>何か質問があったら聞いてください。質問はあなたがしているものなのであくまで「不足している情報・確認事項」とすべきと思います。既についている回答にも書かれていますが、「コピペで他者が再現できる情報」である必要がありますのでHTML、CSSなど適宜「コピペですぐ確認できる」状態のコードをご提示ください。

taka2

2019/07/01 09:18

わかりました、今すぐ訂正します

行動規範の内容に同意します

回答2件

下のソースコードだと、一つ文字を隠してから、もう一つ隠すと、１つめの文字が戻ってしまい、更に+と”が残ってしまう。

これはいかがですか？

js
1        function CountSelectedChars() {
2            var strObj = document.getElementById("text"); 
3            var SelStr = document.getSelection();
4            var regexp = new RegExp('('+SelStr+')', 'g');
5            var a = strObj.innerHTML/* ←変更 */.replace(regexp, `<span style="color:transparent">$1</span>`/* ←変更 */);
6            document.getElementById('text').innerHTML = a;
7        }

投稿2019/07/09 02:38

Lhankor_Mhy

総合スコア36115

ベストアンサー

HTMLが無いと正確な回答は難しいですが、こんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#marker').addEventListener('click',function(e){
4    document.querySelector('#text span').style.visibility='hidden';
5  });
6  document.querySelector('#text').addEventListener('mouseover',function(e){
7    e.target.querySelector('span').style.visibility='visible';
8  });
9});
10</script>
11<input type="button" value="マーカー" id="marker">
12<hr>
13test
14<div id="text" style="width:200px"><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></div>
15test

穴あき

穴あきのようにするには、隠したい文字をspanで囲むなどすればいいでしょう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#marker').addEventListener('click',function(e){
4    [].forEach.call(document.querySelectorAll('#text span'),function(x){
5      x.style.visibility='hidden';
6    });
7  });
8  document.querySelector('#text').addEventListener('mouseover',function(e){
9    [].forEach.call(document.querySelectorAll('#text span'),function(x){
10      x.style.visibility='visible';
11    });
12  });
13});
14</script>
15<input type="button" value="マーカー" id="marker">
16<hr>
17test
18<div id="text" style="width:200px"><span>テキストテキスト</span>テキストテキスト<span>テキスト</span>テキストテキストテキスト<span>テキスト</span>テキスト</div>
19test