从文本区域获取整行并且可编辑 div

Question

在文本区域内右键单击会显示整行 - 关于当前光标位置
我需要同样的可编辑 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>

从文本区域获取整行并且可编辑 div

get entire line from a textarea and editable div

javascript

jquery

contenteditable