使用 jQuery 而不是 JavaScript 如何突出显示 textarea 中的单行文本

Question

我试图突出显示<textarea> 中的单行文本，类似于我们通过光标选择文本的方式。但是我希望这不是鼠标，而是自动发生。我设置文本行用'\n'分隔。我想用黄色突出显示它。我想通过单击按钮来突出显示相应的文本行。我希望我可以选择文本行，而不是固定的字符范围。非常感谢。

这是我的代码：

$(document).ready(function(){
    var text = 'line 1\nline 2\nline 3\n';
    $('#text').val(text);
});

#container {
   float: left;
}
button {
    width: 50px;height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<button id="line1">line 1</button><br><button id="line2">line 2</button><br><button id="line3">line 3</button>
</div>
<textarea id="text" rows="6"></textarea>

Answer 1

试试这个：

$(document).ready(function() {
  var text = 'line 1\nline 2\nline 3\n';
  $('#text').val(text);
  $(".lines").click(function() {
    var num = $(this).attr('id').replace(/[^\d.]/g, '');
    var tarea = document.getElementById('text');
    selectTextareaLine(tarea, num); // selects line 3
  });
});



function selectTextareaLine(tarea, lineNum) {
  lineNum--; // array starts at 0
  var lines = tarea.value.split("\n");

  // calculate start/end
  var startPos = 0,
    endPos = tarea.value.length;
  for (var x = 0; x < lines.length; x++) {
    if (x == lineNum) {
      break;
    }
    startPos += (lines[x].length + 1);

  }

  var endPos = lines[lineNum].length + startPos;

  // do selection
  // Chrome / Firefox

  if (typeof(tarea.selectionStart) != "undefined") {
    tarea.focus();
    tarea.selectionStart = startPos;
    tarea.selectionEnd = endPos;
    return true;
  }

  // IE
  if (document.selection && document.selection.createRange) {
    tarea.focus();
    tarea.select();
    var range = document.selection.createRange();
    range.collapse(true);
    range.moveEnd("character", endPos);
    range.moveStart("character", startPos);
    range.select();
    return true;
  }

  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button class="lines" id="line1">line 1</button>
  <br>
  <button class="lines" id="line2">line 2</button>
  <br>
  <button class="lines" id="line3">line 3</button>
</div>
<textarea id="text" rows="6"></textarea>

Answer 2

这是一个一次突出显示一行的演示。您应该更改按钮的 click 函数，例如将行号与按钮的 id 匹配。

本示例使用focus、selectionStart、selectionEnd 模拟text area element 中的文本选择。这将自动突出显示选定的文本。

$(document).ready(function() {
  var text = 'line 1\nline 2\nline 3\n';
  $('#text').val(text);
  $('button').click(function() {
    // look for id name in text area
    var idName = $(this).prop('id');
    // look for piece of text matching button id
    var i = text.indexOf(String(idName));
    console.log(i);
    // select textarea text
    var myTxt = document.getElementsByTagName('textarea')[0];
    myTxt.focus();
    myTxt.selectionStart = i;
    myTxt.selectionEnd = i + idName.length;
  });
});

#container {
  float: left;
}
button {
  width: 50px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <button id="line 1">line 1</button>
  <br>
  <button id="line 2">line 2</button>
  <br>
  <button id="line 3">line 3</button>
</div>
<textarea id="text" rows="6"></textarea>