如何用 JavaScript 按指定数字块删除 input 中的部分内容？

2026-11-04数据阿明

可以直接修改 input.value，先明确最终保留的内容

setSelectionRange() 只会选中文字，不会删除内容。要通过按钮清理输入框，需要先计算结果，再赋值给 inputElement.value。

原始描述没有明确最终结果。下面的示例假定要保留 002 后面紧邻的一个数字块，删除它前后的其他数字块：

原始输入：548 601 002 847 147
第一步：  548 601 002 847
第二步：  847

这里用 002 定位，最终保留的是 847。如果希望删除 002 及其右侧的全部内容，得到 548 601，后文也有对应的改法。

原来的代码为什么只能选中数字

原示例中，PHP 输出初始值和搜索词，浏览器中的 JavaScript 操作输入框。下面的代码只会聚焦输入框并选中文字，不会删除内容：

inputElement.focus();
inputElement.setSelectionRange(startIndex, endIndex);

字符串的 indexOf("002") 会匹配任意位置出现的 002，包括 1002 内部的字符。如果要匹配完整数字块，可以先按空白拆分，再在数组中查找。

一次点击，保留目标后面的一个数字块

下面的示例按空白拆分输入，找到与目标完全匹配的数字块，再将它后面紧邻的数字块写回输入框。

<?php
$initialValue = $_POST['phpInput'] ?? '';
$searchTermPHP = "002";
?>

<input
    type="text"
    id="phpInput"
    name="phpInput"
    style="width:100em"
    value="<?php echo htmlspecialchars($initialValue, ENT_QUOTES, 'UTF-8'); ?>"
>

<button
    type="button"
    id="cleanInputButton"
    data-search-term="<?php echo htmlspecialchars($searchTermPHP, ENT_QUOTES, 'UTF-8'); ?>"
>
    清理输入
</button>

<script>
const inputElement = document.getElementById("phpInput");
const cleanButton = document.getElementById("cleanInputButton");

cleanButton.addEventListener("click", function () {
    const searchTerm = cleanButton.dataset.searchTerm;
    const blocks = inputElement.value.match(/\S+/g) || [];
    const targetIndex = blocks.indexOf(searchTerm);

    if (targetIndex === -1) {
        return;
    }

    if (targetIndex + 1 >= blocks.length) {
        return;
    }

    inputElement.value = blocks[targetIndex + 1];
    inputElement.focus();
});
</script>

输入 548 601 002 847 147，搜索词为 002 时，点击按钮后得到 847。

需求虽然分两步描述，但如果不需要显示中间状态，可以直接取出最终保留的数字块，无须修改输入框两次。

如果实际要保留 002 左侧的内容

如果预期结果是：

548 601 002 847 147 → 548 601

找到 targetIndex 后，可以这样处理：

if (targetIndex === -1) {
    return;
}

inputElement.value = blocks.slice(0, targetIndex).join(" ");
inputElement.focus();

这条规则不依赖目标后面是否还有数字块，因此应同时移除原示例中的 targetIndex + 1 >= blocks.length 判断。

使用时需要注意

保持数字块为字符串，不要使用 Number() 或 parseInt()，否则 002 的前导零会丢失。
blocks.indexOf(searchTerm) 匹配第一个完全相同的数字块。目标重复出现时，需要另行确定处理哪一次。
示例将连续空格、制表符等空白都视为分隔符。使用 join(" ") 重建内容时，会统一用空格分隔。
主示例在找不到目标或目标后面没有数字块时，会保留原输入值。
修改 input.value 只改变浏览器中的值。如果需要提交给 PHP，输入框还应位于相应的表单中；示例已补上 name="phpInput"。