自动将选择扩展到一行块答案

【问题标题】：automatically expand selection to a block of lines自动将选择扩展到一行块
【发布时间】：2021-06-24 18:47:28
【问题描述】：

尝试将 html 标记添加到 textarea 值
例如 - 请选择 dolor sit 两行块 - 然后单击按钮
选择被转换为 html

问题 - 有没有办法在不手动选择的情况下做同样的事情
只需将 carret 放入一行行中
并单击按钮 - 自动将选择从块的开始扩展到块的结尾

每个块被\n\n分割

$('button').on('click', function(){
  let v = $(tx).val().trim();
    let a = $(tx).prop('selectionStart');
    let b = $(tx).prop('selectionEnd');
    var c = $(tx).val().substring(a, b);
    var res = '<p>' + c + '</p>';
    res = res.replaceAll("\n", "<br>\n");
    v = v.replace(c, res);
    $(tx).val(v);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id='tx' rows = "9">
lorem
ipsum

dolor sit
dolor sit

</textarea>
<button>CLICK</button>

【问题讨论】：

标签： javascript jquery selection

【解决方案1】：

您的 replace 调用 (v = v.replace(c, res);) 很危险，因为它取决于价值而不考虑指数。我也修好了。
我的解决方案的想法是查找前一个分隔符 (\n\n) 位置（或文本开头，如果没有）和下一个分隔符位置（或文本结尾，如果没有）。然后抓取块，对其进行操作，并将原始块（考虑索引）替换为被操作的块。

祝你好运。

const replaceBetweenIndices = (origin, startIndex, endIndex, insertion) =>
  origin.substring(0, startIndex) + insertion + origin.substring(endIndex);

$('button').on('click', function(){
  const delimiter = '\n\n';
  const delimiterLength = delimiter.length;
  let originalText = $(tx).val();
  let begSel = parseInt($(tx).prop('selectionStart'));
  let endSel = parseInt($(tx).prop('selectionEnd'));
  var beg, end;
  for(beg = begSel; beg !== 0 && ( beg < delimiterLength || originalText.substring(beg - delimiterLength, beg) !== delimiter ); beg-- );
  for(end = endSel; end !== originalText.length && (end > originalText.length - delimiterLength || originalText.substr(end, delimiterLength) !== delimiter); end++);
  const block = originalText.substring(beg,end);
  manipulatedBlock = `<p>${block.replaceAll("\n", "<br>\n")}</p>`;
  manipulatedText = originalText.substring(0, beg) + manipulatedBlock + originalText.substring(end);
  manipulatedText = manipulatedText.trim();
  $(tx).val(manipulatedText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id='tx' rows = "9">
lorem
ipsum

dolor sit
dolor sit

</textarea>
<button>CLICK</button>

【讨论】：

非常感谢，我认为这个概念既强大又安全