從 textarea 和可編輯的 div 中獲取整行

Question

在 textarea 內右鍵單擊給出整行 - 關於當前光標位置
我需要一個可編輯的 div - 但它不起作用
控制台為空，即存在空字符串
請幫忙

 $(document).on('contextmenu', '#txstory', function(e){ e.preventDefault(); var borderChars = ['\\n', '\\r', '\\t']; var tex = $(this).val(); var start = $(this)[0].selectionStart; var end = $(this)[0].selectionEnd; while (start > 0){ if(borderChars.indexOf(tex[start]) == -1){--start;} else{break;} } while(end < tex.length){ if(borderChars.indexOf(tex[end]) == -1){++end;} else{break;} } var str = tex.substr(start, end - start).trim(); console.log(str); }); $(document).on('contextmenu', '#ed', function(e){ e.preventDefault(); var borderChars = ['\\n', '\\r', '\\t']; var tex = $(this).text(); var start = $(this)[0].selectionStart; var end = $(this)[0].selectionEnd; while (start > 0){ if(borderChars.indexOf(tex[start]) == -1){--start;} else{break;} } while(end < tex.length){ if(borderChars.indexOf(tex[end]) == -1){++end;} else{break;} } var str = tex.substr(start, end - start).trim(); console.log(str); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='btx' id='txstory'>lorem ipsum</textarea> <div class='ed' id='ed' contenteditable>dolor sit</div>

Answer 1

獲取用戶選擇的baseOffset ，然后遍歷每一行並檢查偏移量是否在行首索引和行尾索引的范圍內：

 $(document).on('contextmenu', '#txstory', function(e){ e.preventDefault(); var borderChars = ['\\n', '\\r', '\\t']; var tex = $(this).val(); var start = $(this)[0].selectionStart; var end = $(this)[0].selectionEnd; while (start > 0){ if(borderChars.indexOf(tex[start]) == -1){--start;} else{break;} } while(end < tex.length){ if(borderChars.indexOf(tex[end]) == -1){++end;} else{break;} } var str = tex.substr(start, end - start).trim(); console.log(str); }); $(document).on('contextmenu', '#ed', function(e){ var pos = document.getSelection().baseOffset; var lines = e.target.textContent.split("\\n") var line; var characs = 0; for(let i = 0; i < lines.length; i++){ if(characs <= pos && characs + lines[i].length >= pos){ line = lines[i]; break; } characs += lines[i].length } console.log(line) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='btx' id='txstory'>lorem ipsum</textarea> <div class='ed' id='ed' contenteditable>dolor sit</div>