如何在jquery中选择文本之前和之后选择

Question

我想在文本框中找到所选文本之前和之后的文本

例如

<input id="selectionBox" />

示例： selectionBox 输入值等于“检查输入地址...”

用户在“检查添加”之后和“用于键入...”之前选择了“r”，我想将“r”之前和之后存储在单独的变量中

$('#selectionBox').select(function(e) { 
    var start = e.target.selectionStart;
    var end = e.target.selectionEnd;
    var selectedtext  = $('#selectionBox').val().substring(start, end);
    // find before and after selected text  
    //var beforeSel = before selection;
    //var afterSel = after selection;
})

编辑 1： 我想在文本之前和之后找到像这样更改 selctionBox 值的文本

var textboxValue = beforeSel + "<blank>" + selectedtext  + "<blank>" + afterSel;
$("#selectionBox").val(textboxValue);

怎么办？谢谢

Answer 1

您只需使用与获取所选文本相同的技术。

substring(0, start)获取选择前的文本，substring(end)获取选择后的文本。

$('#selectionBox').select(function(e) {
  var start = e.target.selectionStart;
  var end = e.target.selectionEnd;
  var text = $('#selectionBox').val();
  
  var selectedtext = text.substring(start, end);
  
  // find before and after selected text
  var beforeSel = text.substring(0, start);
  var afterSel = text.substring(end);

  $('#selected-text').text(selectedtext);
  $('#before-selection').text(beforeSel);
  $('#after-selection').text(afterSel);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="selectionBox" />
<div>Selected Text: <span id="selected-text" style="color:blue"></span>
</div>
<div>Before Selection: <span id="before-selection" style="color:blue"></span>
</div>
<div>After Selection: <span id="after-selection" style="color:blue"></span>
</div>