自动将选择扩展到一行行

问题描述

尝试将 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>

解决方法

您的 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>

javascript jquery selection