正则表达式匹配句中单词时为何会包含前置标点？

Hey, let's break down your problem and fix those nested <mark> tags once and for all, plus answer that regex literal variable question you had.

What's Going Wrong Right Now #

Your current approach runs two separate replace calls: first matching words with their left-side punctuation, then matching standalone punctuation. This causes nesting because the first replace wraps a chunk that includes punctuation, and the second replace tries to wrap that same punctuation again. Also, your initial regex grabs the left punctuation but ignores the right, which isn't what you want.

And to answer your quick question first: No, you can't use variables directly in regex literals (like /pattern/gi). Literals are static at compile time, so your current method of building a string and passing it to new RegExp() is the right way to go—though we can clean that up a bit with template literals.

Solution 1: Wrap Words + Adjacent Punctuation in a Single <mark> (Your First Expected Outcome) #

We'll rewrite the regex to capture both left and right punctuation adjacent to your target words, then handle everything in one pass to avoid nesting. Then we'll clean up any remaining standalone punctuation.

// Example word list (replace with your actual variable)
const targetWords = "like|the|is|it";

// Regex to match: optional leading punctuation + target word + optional trailing punctuation
// Uses non-capturing groups (?:...) for optional parts to keep capture groups clean
const wordAndPuncRegex = new RegExp(
  `(?:([.,!?"])\\s*)?(${targetWords})(?:\\s*([.,!?"]))?`,
  'gi'
);

let text = 'I am "the" man.';

// First pass: handle words and their adjacent punctuation
text = text.replace(wordAndPuncRegex, (match, leftPunc, word, rightPunc) => {
  let highlightedContent = '';
  if (leftPunc) highlightedContent += leftPunc;
  highlightedContent += word;
  if (rightPunc) highlightedContent += rightPunc;
  return `<mark>${highlightedContent}</mark>`;
});

// Second pass: handle any remaining standalone punctuation
const standalonePuncRegex = new RegExp(`([.,!?"])`, 'g');
text = text.replace(standalonePuncRegex, `<mark>$1</mark>`);

console.log(text);
// Output: I am <mark>"the"</mark> man<mark>.</mark>

Solution 2: Wrap Words and Punctuation in Separate <mark> Tags (Your Second Expected Outcome) #

This uses the same core regex, but we'll split the matched parts into individual <mark> tags instead of combining them:

const targetWords = "like|the|is|it";
const wordAndPuncRegex = new RegExp(
  `(?:([.,!?"])\\s*)?(${targetWords})(?:\\s*([.,!?"]))?`,
  'gi'
);

let text = 'I am "the" man.';

text = text.replace(wordAndPuncRegex, (match, leftPunc, word, rightPunc) => {
  let result = '';
  if (leftPunc) result += `<mark>${leftPunc}</mark>`;
  result += `<mark>${word}</mark>`;
  if (rightPunc) result += `<mark>${rightPunc}</mark>`;
  return result;
});

// Clean up standalone punctuation
const standalonePuncRegex = new RegExp(`([.,!?"])`, 'g');
text = text.replace(standalonePuncRegex, `<mark>$1</mark>`);

console.log(text);
// Output: I am <mark>"</mark><mark>the</mark><mark>"</mark> man<mark>.</mark>

Key Improvements #

• No More Nesting: By handling words and their adjacent punctuation in one pass, we avoid overlapping matches that cause nested tags.
• Cleaner Variable Regex: Using template literals (`...`) instead of string concatenation makes your regex easier to read and reduces escape characters (no more double backslashes like \\W).
• Better Word Matching: The original \W would fail for words at the start of a sentence (e.g., "Like to go"). This new regex handles leading punctuation (or no leading characters) much more reliably.

Quick Note #

If you need to support more punctuation types, just expand the character set in the regex—for example, change [.,!?"] to [.,!?";:'] to include semicolons, colons, and apostrophes.

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