Add Bold Tag in String - Problem

Imagine you're building a text editor that needs to highlight search results in a document. You have a string s and an array of words that represent search terms. Your task is to wrap all occurrences of these words in the string with <b> and </b> tags.

Here's the challenge: if two highlighted regions overlap or are consecutive, you must merge them into a single bold tag pair. This prevents messy HTML like <b>hel</b><b>lo</b> and instead produces clean <b>hello</b>.

Goal: Return the string with properly merged bold tags around all matching substrings.

Input & Output

example_1.py โ€” Basic word matching
$ Input: s = "abcxyz", words = ["abc", "123"]
โ€บ Output: "<b>abc</b>xyz"
๐Ÿ’ก Note: Only "abc" appears in the string, so we wrap it with bold tags. "123" doesn't appear, so it's ignored.
example_2.py โ€” Overlapping words
$ Input: s = "aaabbcc", words = ["aaa", "aab", "bc"]
โ€บ Output: "<b>aaabbc</b>c"
๐Ÿ’ก Note: "aaa" matches [0,2], "aab" matches [1,3], "bc" matches [4,5]. Since [0,2] and [1,3] overlap, and [3,4] are adjacent to [4,5], we merge them all into one bold region [0,5].
example_3.py โ€” Separate bold regions
$ Input: s = "cccccccc", words = ["cc", "c"]
โ€บ Output: "<b>cccccccc</b>"
๐Ÿ’ก Note: Both "c" and "cc" match at multiple overlapping positions throughout the string. All matches overlap, so the entire string becomes one bold region.

Constraints

  • 1 โ‰ค s.length โ‰ค 1000
  • 0 โ‰ค words.length โ‰ค 50
  • 1 โ‰ค words[i].length โ‰ค 50
  • s and words[i] consist of English letters only
  • All strings in words are unique

Visualization

Tap to expand
Text Highlighter ProcessOriginal Document:"The quick brown fox jumps over the lazy dog"Keywords: ["quick", "fox", "the"]Step 1: Identify Matches"quick" at [4,8], "fox" at [16,18], "the" at [0,2], "the" at [31,33]Step 2: Create Highlight Intervals[0,2], [4,8], [16,18], [31,33] - No overlaps to mergeStep 3: Final Result"<b>the</b> <b>quick</b> brown <b>fox</b> jumps over <b>the</b> lazy dog"๐Ÿ’ก KEYMerge adjacenthighlights!
Understanding the Visualization
1
Find Keywords
Scan through the document and identify all keyword positions
2
Mark Regions
Convert keyword positions into highlight regions (intervals)
3
Merge Overlaps
Combine overlapping or touching highlight regions
4
Apply Highlighting
Add bold tags around the final merged regions
Key Takeaway
๐ŸŽฏ Key Insight: Think of this problem as highlighting text in a document - find all matches, then merge overlapping highlights for a clean result.
Asked in
Google 42 Amazon 38 Meta 25 Microsoft 18
42.0K Views
Medium Frequency
~18 min Avg. Time
1.4K Likes
Ln 1, Col 1
Smart Actions
๐Ÿ’ก Explanation
AI Ready
๐Ÿ’ก Suggestion Tab to accept Esc to dismiss
// Output will appear here after running code
Code Editor Closed
Click the red button to reopen