自动将选择范围扩展到一行

Question

尝试将 html 标签添加到文本区域值
例如 - pls select dolor sit 两行块 - 然后单击按钮
select离子转换为html

问题 - 有没有办法在不手动制造 selection 的情况下做同样的事情
只需将 Carret 放入一行行中即可
然后单击按钮 - 从块的开始到结束自动扩展 selection

每个块除以\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>

Answer 1

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

祝你好运。

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>

自动将选择范围扩展到一行

automatically expand selection to a block of lines

javascript

jquery

selection