如何使用JavaScript为文本框中的特定单词添加<span>标签？

完全可以实现，核心是检测输入文本里的目标单词，将其替换为包裹<span>标签的版本，以下是两种实用的实现方式：

1. 基础字符串替换（简单场景） #

如果无需考虑单词被包含在其他词汇里（比如不担心“questionnaire”中的“question”被误匹配），直接用replace方法即可：

// 获取输入框元素
const input = document.getElementById('your-input-id');
// 要高亮的目标单词
const targetWord = 'question';
// 生成带高亮标签的文本
const highlightedText = input.value.replace(targetWord, `<span style="background-color: #ffeb3b;">${targetWord}</span>`);
// 将结果渲染到页面（示例：放到id为display-area的容器中）
document.getElementById('display-area').innerHTML = highlightedText;

2. 正则精确匹配（避免误匹配） #

如果需要精准匹配独立单词，不触发包含目标词的其他词汇，用正则的单词边界匹配：

const input = document.getElementById('your-input-id');
const targetWord = 'question';
// \b 匹配单词边界，gi 表示全局匹配且忽略大小写
const regex = new RegExp(`\\b${targetWord}\\b`, 'gi');
const highlightedText = input.value.replace(regex, match => {
  return `<span style="background-color: #ffeb3b;">${match}</span>`;
});
document.getElementById('display-area').innerHTML = highlightedText;

动态监听输入变化 #

如果要实时根据输入内容更新高亮，绑定input事件即可：

const input = document.getElementById('your-input-id');
const displayArea = document.getElementById('display-area');
const targetWord = 'question';
const regex = new RegExp(`\\b${targetWord}\\b`, 'gi');

input.addEventListener('input', () => {
  const highlightedText = input.value.replace(regex, match => {
    return `<span style="background-color: #ffeb3b;">${match}</span>`;
  });
  displayArea.innerHTML = highlightedText;
});

你可以根据需求调整<span>的样式，比如修改背景色、字体粗细等，只需调整style属性里的CSS规则。

内容的提问来源于stack exchange，提问作者Kabilash