前提・実現したいこと
ウェブブラウザ上のテキストに範囲指定して、ボタンを押すなどしてそこの文字を隠して、マウスポインタを乗せたらもとにもどす。
発生している問題・エラーメッセージ
1.マウスポインタを乗せたらもとに戻るようにする方法がわからない。
2.範囲指定して隠した状態を幾つも保存しておく方法がわからない。
3.どのように隠せばいいのかがわからない。
4.下のソースコードだと、一つ文字を隠してから、もう一つ隠すと、1つめの文字が戻ってしまい、更に+と”が残ってしまう。
該当のソースコード
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>
回答2件
あなたの回答
tips
プレビュー