Skip to main content

Text Highlighting Script

Download: webflow-scripts.zip (includes text-highlighting.js)

Wraps specified words or phrases inside headings with a CSS class for gradient or colour styling. The terms are driven from a single CMS field per page, keeping design separate from content — no hard-coded <span> tags in templates.

Configuration​

const CONFIG = {
  highlightFieldId: 'highlighted-words',  // Element ID of the CMS field on page
  delimiter: '|',                          // Pipe-delimited (allows commas in phrases)
  highlightClass: 'am-grad-span',          // CSS class applied to matched text
  headingSelectors: [
    '.highlight1',                         // Headings with this combo class
    '[id*="highlight1"]'                   // Or any element whose ID contains "highlight1"
  ],
  caseSensitive: false,
  wholeWordOnly: true
};

Swap am-grad-span for any class that carries the client's brand gradient or colour style.

Webflow setup​

StepAction
1Create a Plain Text CMS field on the collection (e.g. highlighted-heading-words-phrases).
2On the CMS-bound template page, add a Text Block element bound to that field. Set its Element ID to highlighted-words.
3Enter pipe-delimited terms in the CMS item: MIT | Physics | Simple, Personal, Clear.
4Visually hide the element (e.g. display: none or move it off-screen) — it is only read by the script.
5Add the combo class highlight1 to any heading that should have words highlighted (or give it an ID containing highlight1).
6Add text-highlighting.js once in Site Settings → Custom Code → Footer (before </body>).

How it works​

Input CMS field value: MIT | Physics | Socratic | Simple, Personal, Clear.

Input HTML:

<h1 class="heading highlight1">MIT Physics Tutoring</h1>

Output HTML:

<h1 class="heading highlight1">
  <span class="am-grad-span">MIT</span>
  <span class="am-grad-span">Physics</span> Tutoring
</h1>
  • Terms are processed longest-first to prevent partial matches (e.g. AP Physics Mastery is wrapped before Physics).
  • Punctuation (periods, commas, colons) is fully supported inside phrases.
  • Regex is pre-compiled once on load for efficiency.

Multiple headings, one CMS field​

Any element with the class highlight1 (or an ID containing highlight1) on the same page will have all the listed terms wrapped. One CMS field controls the highlight terms for the entire page.

CSS example​

.am-grad-span {
  background: linear-gradient(90deg, #ff6b35, #f7c59f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Replace the gradient with the client's brand colours.

Version history​

VersionDateSummary
v2.3Jan 2025Pre-compiles regex once; more efficient DOM selection
v2.2Jan 2025Full punctuation support in phrases
v2.1Jan 2025Pipe delimiter; fixed multi-word phrase partial match
v2.0Dec 2024Multi-heading support with single CMS field
v1.0PriorSingle H1, separate highlight field