如何通过编程修改HTML段落单个单词样式？解决文本分行问题

API 探路者

2026-6-30

解决HTML段落中单个单词样式修改导致的换行问题

你当前的实现会把文本拆成三行，核心原因是beforeNode和afterNode都是<p>块级元素，块级元素默认独占一行，最终导致内容分行显示。以下是两种视觉效果更优、更简洁的实现方案：

方案一：简洁正则替换法

直接修改原段落的innerHTML，将目标单词替换为带高亮样式的<span>，适合处理无特殊字符的文本：

const textToSearch = "testing";
// 转义正则特殊字符，避免匹配出错
const escapedText = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedText})`, 'g');

document.querySelectorAll('p').forEach(par => {
  par.innerHTML = par.textContent.replace(regex, '<span style="background-color: yellow">$1</span>');
});

对应的HTML：

<p> A complete text for testing purposes</p>

方案二：安全DOM操作法

如果文本包含HTML特殊字符（如<、>），用DOM节点拆分的方式更安全，避免XSS风险：

const textToSearch = "testing";

document.querySelectorAll('p').forEach(par => {
  const text = par.textContent;
  const index = text.indexOf(textToSearch);
  if (index === -1) return;

  // 拆分文本为三个部分
  const beforeText = text.slice(0, index);
  const targetText = text.slice(index, index + textToSearch.length);
  const afterText = text.slice(index + textToSearch.length);

  // 清空原段落并重新组装内容
  par.textContent = '';
  if (beforeText) par.appendChild(document.createTextNode(beforeText));

  const highlightSpan = document.createElement('span');
  highlightSpan.style.backgroundColor = 'yellow';
  highlightSpan.textContent = targetText;
  par.appendChild(highlightSpan);

  if (afterText) par.appendChild(document.createTextNode(afterText));
});