如何替换输入值的选定部分？答案

【问题标题】：How can I replace the selected portion of an input value?如何替换输入值的选定部分？
【发布时间】：2022-11-23 04:29:46
【问题描述】：

我想选择输入的一个或多个单词，然后单击按钮以替换 _ 符号而不是字符串的选定部分。

这不是完整的代码，但以某种方式为您提供了想法：

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');


dictatePush.addEventListener('click', (e) => {
  const start = blankInput.selectionStart;
  const finish = blankInput.selectionEnd + 1;
  blankInput.value = blankInput.value.substring(0, start) + '_';
});

input {
  width: 50vw;
}

<input data-collect="blank" id="blank-input" type="text" value="Select (highlight) a word and click Push">
<button type="button" class="dictate-push">Push</button>

因此，如果您键入 I think I might need a car 并在单击推送后选择 might 作为单词，我们应该得到：

I think I _ need a car

请注意，我们希望它干净，因此如果您选择确切的词或选择单词和周围的空格我们应该仍然得到相同的结果。
我们也想返回替换后的单词，这里是might
你会怎么做？

【问题讨论】：

您选择输入中的文本，您会得到一个日志作为输出
嘿，有另一个输入框是一种可能的解决方案吗？您可以输入要删除的单词吗？

标签： javascript regex

【解决方案1】：

您可以包括修剪原始字符串的开头和结尾，如下所示：

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');


dictatePush.addEventListener('click', (e) => {
  const start = blankInput.selectionStart;
  const finish = blankInput.selectionEnd + 1;
  blankInput.value = blankInput.value.substring(0, start).trimEnd() + ' _ ' + blankInput.value.substring(finish).trimStart();
});

<input data-collect="blank" id="blank-input" type="text">
<button type="button" class="dictate-push">Push</button>

【讨论】：

这缺少 _（下划线）之后的第一个词

【解决方案2】：

只是建立在你必须说明的东西之上单程你可以摆脱困境并从那里继续：

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');

dictatePush.addEventListener('click', (e) => {
  const start = blankInput.selectionStart;
  const finish = blankInput.selectionEnd + 1;
  const stringToReplace = blankInput.value.slice(start, finish - 1);
  if (stringToReplace !== "") {
    blankInput.value = blankInput.value.replace(stringToReplace, "_")
  }
});

<input data-collect="blank" id="blank-input" type="text">
<button type="button" class="dictate-push">Push</button>

【讨论】：

【解决方案3】：

您可以分别捕获第一个和第二个子字符串。

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');

dictatePush.addEventListener('click', (e) => {
  const start = blankInput.selectionStart;
  const finish = blankInput.selectionEnd;
  const substr1 = blankInput.value.substring(0, start);
  const substr2 = blankInput.value.substring(finish);
  
  blankInput.value = substr1 + '_' + substr2;
});

input {
  width: 50vw;
}

<input data-collect="blank" id="blank-input" type="text" value="Select (highlight) a word and click Push">
<button type="button" class="dictate-push">Push</button>

【讨论】：