JavaScript实现段落每个单词首字符下划线问题求助

云上老周

2026-5-28

我来帮你梳理这段实现文本效果的代码和对应的目标语句：

首先是我们要处理的目标语句：

Mr Blue has a blue house and a blue car.

下面是你提供的JavaScript代码，意图是给每个单词的第二个字母添加下划线样式：

function myFunction(){ 
  var str = document.getElementById("sentence").innerHTML; 
  for(var i=0; i<str.length;i++){ 
    if(i == 0 ) { 
      var res = str.replace(str.charAt(i+1), "<u>"+str.charAt(i+1)+"</u>"); 
      document.getElementById("sentence").innerHTML = res; 
    }else if(str.charAt(i) == " ") { 
      var res = str.replace(str.charAt(i+1), "<u>"+str.charAt(i+1)+"</u>"); 
      document.getElementById("sentence").innerHTML = res; 
    } 
  }
}

不过这里得提醒一下，这段代码存在几个小问题：

每次循环都直接修改DOM，会导致原字符串被多次覆盖，容易出现不符合预期的替换（比如遇到重复字符时，replace只会替换第一个匹配项）
循环逻辑没有考虑到单词长度不足2的情况（比如语句里的"a"），会出现无意义的操作

如果想要更高效、准确地实现“给每个单词第二个字母加下划线”的效果，推荐用正则表达式来简化代码：

function myFunction() {
  // 先获取元素，避免重复DOM查询
  const sentenceElement = document.getElementById("sentence");
  const originalText = sentenceElement.innerHTML;
  // 用正则匹配每个单词的前两个字符，给第二个字符套上下划线标签
  const modifiedText = originalText.replace(/(\b\w)(\w)/g, '$1<u>$2</u>');
  sentenceElement.innerHTML = modifiedText;
}

这个正则表达式(\b\w)(\w)的意思是：