如何使用JavaScript修改<p>标签中前两个单词的字号

实现方案 #

通过原生JavaScript获取段落元素，拆分文本为单词数组，将前两个单词用带样式的<span>包裹后重新插入到段落中，具体代码如下：

// 获取目标段落（如果有多个p，建议给目标p加类名后用类选择器定位）
const targetPara = document.querySelector('p');
// 拆分文本为单词数组，处理多余空格
const wordList = targetPara.textContent.trim().split(/\s+/);

// 确保段落至少有两个单词再处理
if (wordList.length >= 2) {
  // 用span包裹前两个单词并设置字号（可自行调整字号数值）
  const formattedText = `<span style="font-size: 24px;">${wordList[0]} ${wordList[1]}</span> ${wordList.slice(2).join(' ')}`;
  // 更新段落内容
  targetPara.innerHTML = formattedText;
}

细节说明 #

• 用split(/\s+/)拆分单词，能兼容段落中多个连续空格的情况，避免拆分出空字符串。
• 提前用trim()清除文本首尾的空白，防止开头空格导致第一个单词为空。
• 增加单词数量判断，避免段落单词不足两个时出现错误。
• 如果需要定位特定段落，给目标p标签添加类名（比如class="custom-para"），然后用document.querySelector('.custom-para')精准获取。

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