Swapping Out Text Five Different Ways

A comprehensive guide to text replacement techniques in JavaScript, from the fastest DOM methods to CSS-based alternatives for modern web applications

Text manipulation is a fundamental aspect of interactive web development. Whether you're building dynamic user interfaces, creating localized applications, or implementing real-time updates, understanding how to effectively swap text content is essential.

This guide explores five distinct methods for replacing text, ranging from direct JavaScript string manipulation to CSS-based text replacement techniques. Each approach has distinct use cases, performance characteristics, and SEO implications that developers must understand to make informed decisions in their applications.

By mastering these techniques, you'll be equipped to handle everything from simple string substitutions to complex dynamic content updates while maintaining optimal performance and accessibility in your Next.js applications.

Method 1: String replace() with Patterns and Replacement Functions

The String.prototype.replace() method represents the most versatile approach for text substitution in JavaScript. This method accepts a pattern (either a string or regular expression) and a replacement value, returning a new string with the specified replacements applied.

When the pattern is a string, only the first occurrence gets replaced. For global replacement, developers must use a regular expression with the global flag. The method's flexibility extends further with support for replacement functions, enabling dynamic replacement logic based on matched content.

As documented in MDN Web Docs, the replace() method supports special patterns including $& for the matched substring, $n for capture groups, and $' for text following the match. These enable sophisticated text restructuring without custom parsing logic.

String replace() Examples

1const text = "The quick brown fox";2const result = text.replace("brown", "red");3// Result: "The quick red fox"4 5// Global replacement with regular expression6const text2 = "Apple apple APPLE";7const result2 = text2.replace(/apple/gi, "pear");8// Result: "Pear pear PEAR"9 10// Using replacement function for dynamic transformations11const prices = ["$10", "$25", "$50"];12const converted = prices.map(price =>13 price.replace(/\$(\d+)/, (match, amount) =>14 `€${(parseInt(amount) * 0.92).toFixed(2)}`15 )16);17// Result: ["€9.20", "€23.00", "€46.00"]18 19// Special replacement patterns20const text3 = "Hello, World!";21const result3 = text3.replace(/(\w+), (\w+)!/, "$2 says $1");22// Result: "World says Hello!"

Special Replacement Patterns

The replace() method supports special patterns including $& for the matched substring, $n for capture groups, and $' for text following the match. These enable sophisticated text restructuring without custom parsing logic.

Method 2: Using textContent for Raw Text Replacement

The textContent property is the fastest and most secure way to replace plain text in a DOM element. It sets or returns the text content of the specified node and all its descendants, treating input as literal text without any HTML parsing.

Unlike innerHTML, textContent does not parse the input as HTML, making it immune to XSS attacks when handling user-generated content. This makes it the preferred choice for security-conscious applications where text may contain user input. Our web development services emphasize security best practices like this for building robust applications.

According to W3Schools, textContent is significantly faster than innerHTML for plain text updates because it avoids the HTML parsing overhead entirely.

textContent Examples

1// Basic textContent usage2const element = document.getElementById('message');3element.textContent = 'New message here';4 5// TypeScript example with proper typing6const messageElement = document.getElementById('message') as HTMLElement;7if (messageElement) {8 messageElement.textContent = 'Updated message';9}10 11// Safe with user input - HTML is escaped automatically12const userInput = '<script>alert("xss")</script>';13element.textContent = userInput; // Renders as text, not executed14 15// Bulk text updates16const paragraphs = document.querySelectorAll('.update-me');17paragraphs.forEach(p => p.textContent = 'Updated content');

When to Use textContent

Use textContent when you need pure text replacement and want maximum performance. It's the safest choice when the replacement text should not be interpreted as HTML, especially with user-generated content or when security is a priority.

Method 3: Using innerText for Display-Aware Replacement

The innerText property is aware of CSS styling and only returns visible text. It respects styling like display: none and will not return text from hidden elements. This makes it particularly useful for testing, debugging, or scenarios where you need to match exactly what users actually see on the page.

However, this CSS awareness comes with a performance cost. As noted in W3Schools documentation, innerText triggers a reflow because it needs to compute the rendered text, making it slower than textContent for large-scale updates.

The innerText property also interprets line breaks as actual line breaks in the returned string, making it useful for text extraction scenarios where formatting matters.

innerText Examples

1// innerText is CSS-aware2const element = document.getElementById('content');3element.innerText = 'Updated content';4 5// Check visible text before updating6if (element.innerText.includes('loading')) {7 element.innerText = 'Content loaded successfully';8}9 10// Hidden text is ignored11element.innerHTML = '<span style="display:none">hidden</span> visible';12console.log(element.innerText); // Only "visible"13 14// Detecting text overflow15const container = document.getElementById('container');16if (container.innerText.length > container.getAttribute('data-max-length')) {17 console.log('Text has overflowed');18}19 20// TypeScript with proper event handling21const label = document.querySelector('.status-label') as HTMLElement;22label.addEventListener('click', () => {23 label.innerText = 'Clicked';24});

Performance Consideration

innerText triggers reflow, making it slower than textContent. Use it only when you specifically need CSS-aware text handling, such as testing what users will see, implementing text-overflow detection, or when visible text detection is required.

Method 4: CSS Pseudo-Element Text Replacement

CSS offers an elegant solution for visual text replacement without modifying the underlying HTML content. The :before and :after pseudo-elements, combined with the content property, enable developers to overlay replacement text atop existing content.

This technique proves particularly valuable for icon text replacement, accessibility-preserving substitutions, and styling scenarios where the original text should remain available to screen readers and search engines. Proper accessibility implementation is essential for SEO optimization, as search engines evaluate site accessibility as a ranking factor.

As covered in GeeksforGeeks' CSS text replacement tutorial, several techniques exist including font-size: 0, text-indent, and visibility: hidden. Each has trade-offs between accessibility, SEO, and visual appearance.

CSS Text Replacement Techniques

1/* Hide original text with visibility */2.original-text {3 visibility: hidden;4 position: relative;5}6 7.original-text::after {8 visibility: visible;9 content: 'New text via CSS';10 position: absolute;11 left: 0;12 top: 0;13}14 15/* Alternative using display - more accessible approach */16.replace-text {17 font-size: 0;18}19 20.replace-text::after {21 font-size: 16px;22 content: attr(data-text);23}24 25/* text-indent technique for screen reader preservation */26.screen-reader-text {27 text-indent: -9999px;28 overflow: hidden;29 white-space: nowrap;30}31 32.screen-reader-text::after {33 content: 'Visible replacement';34 display: block;35 text-indent: 0;36}37 38/* Dynamic text with data attributes */39.dynamic-label::after {40 content: attr(data-label);41 display: inline-block;42}

Accessibility Warning

CSS text replacement can impact accessibility. Screen readers may read the hidden original text instead of the visible replacement. Test with assistive technologies and consider using ARIA labels or sr-only text for the actual content. The text-indent technique with overflow: hidden is generally the most accessible approach.

Method 5: CSSStyleSheet.replace() for Dynamic Stylesheets

The CSSStyleSheet.replace() method represents a modern addition to the CSS Object Model, enabling programmatic replacement of stylesheet content. While not directly replacing text within document content, this API allows runtime stylesheet modifications that can affect text styling globally across your application.

This method returns a Promise that resolves with the updated CSSStyleSheet object, supporting asynchronous stylesheet construction and modification. It operates exclusively on stylesheets created with the CSSStyleSheet() constructor.

According to MDN Web Docs, this approach is part of the Constructable Stylesheets API, which excels when multiple elements require synchronized styling updates or when implementing theme systems in modern applications.

CSSStyleSheet.replace() Examples

1// Create and populate a stylesheet2const stylesheet = new CSSStyleSheet();3 4stylesheet.replace(`5 :root {6 --primary-color: #0066cc;7 --text-size: 16px;8 --text-color: #333333;9 }10 11 body {12 font-size: var(--text-size);13 color: var(--text-color);14 }15`).then(() => {16 // Adopt the stylesheet17 document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];18 console.log('Stylesheet applied successfully');19}).catch(err => {20 console.error('Failed to replace styles:', err);21});22 23// Dynamic theme switching24function switchTheme(themeName) {25 const themeSheet = new CSSStyleSheet();26 const isDark = themeName === 'dark';27 28 themeSheet.replace(`29 :root {30 --bg-color: ${isDark ? '#1a1a1a' : '#ffffff'};31 --text-color: ${isDark ? '#ffffff' : '#1a1a1a'};32 --card-bg: ${isDark ? '#2d2d2d' : '#f5f5f5'};33 }34 `).then(() => {35 document.adoptedStyleSheets = [...document.adoptedStyleSheets, themeSheet];36 });37}38 39// TypeScript version with proper typing40const themeSheet = new CSSStyleSheet<':root'>({41 vars: {42 '--primary-color': '#0066cc'43 }44});

Modern CSSOM

CSSStyleSheet.replace() is part of the Constructable Stylesheets API, available in modern browsers including Chrome 73+, Firefox 101+, and Safari 16.4+. This approach excels when multiple elements require synchronized styling updates or when implementing theme systems that need to update efficiently.

Performance Comparison

Understanding the performance characteristics of each method helps you choose the right approach for your use case. The choice becomes especially important in applications with frequent updates or large DOM trees:

Method	Performance	Use Case
String replace()	Very Fast	String manipulation, data transformation, regex operations
textContent	Fastest	Plain text replacement in DOM, security-critical updates
innerText	Slow (reflow)	CSS-aware text handling, overflow detection
CSS pseudo-elements	Fast (render-time)	Static text substitution, icon replacements
CSSStyleSheet.replace()	Fast (async)	Bulk styling updates, theme switching

The performance differences are most noticeable when updating large numbers of elements or when updates occur frequently. For occasional updates, the difference may be negligible, but in performance-critical paths, choosing the right method can significantly impact user experience.

Performance Optimization Tips

Batch Updates

Group multiple DOM updates together using DocumentFragment to minimize reflows and repaints

Use textContent

Prefer textContent over innerText for plain text to avoid costly layout recalculations

Cache References

Store element references in variables to avoid repeated querySelector or getElementById calls

Avoid innerHTML

innerHTML is slower than textContent for plain text updates due to HTML parsing overhead

Best Practices for Modern Applications

In React and Next.js applications, direct DOM manipulation should be the exception, not the rule. Understanding these low-level APIs helps you make better architectural decisions and recognize when framework abstractions are sufficient.

React Approach

Use React state to manage dynamic text content
Update through props rather than direct DOM access
Use refs only when necessary for animations, integrations, or third-party libraries
Consider useEffect for side effects that require DOM access after renders

Accessibility

Ensure text changes are announced to screen readers using aria-live regions
Test with keyboard navigation after implementing text changes
Verify that dynamic text updates are perceivable for all users
When using CSS text replacement, provide screen reader alternative text

Security

Always sanitize input before using innerHTML with trusted types
Prefer textContent for user-generated content to prevent XSS vulnerabilities
Use DOMPurify or similar libraries when HTML rendering is required
Implement Content Security Policy headers to mitigate injection attacks

React Text Update Patterns

1'use client';2 3import { useState, useRef, useEffect } from 'react';4 5export default function DynamicText() {6 const [text, setText] = useState('Initial text');7 const textRef = useRef<HTMLParagraphElement>(null);8 9 // React state approach (preferred)10 const updateText = (newText: string) => {11 setText(newText);12 };13 14 // Direct DOM only when necessary (animations, integrations)15 const updateDOMDirectly = () => {16 if (textRef.current) {17 textRef.current.textContent = 'Updated via ref';18 }19 };20 21 // Accessible dynamic updates with aria-live22 const updateWithAnnouncement = (newText: string) => {23 setText(newText);24 // Screen readers will announce the update via aria-live region25 };26 27 // Proper cleanup for DOM-based effects28 useEffect(() => {29 const element = document.getElementById('external-element');30 if (element) {31 element.textContent = 'Initialized from React';32 }33 return () => {34 // Cleanup if needed35 };36 }, []);37 38 return (39 <>40 <p ref={textRef}>{text}</p>41 <div role="status" aria-live="polite" className="sr-only">42 Current text: {text}43 </div>44 <button onClick={() => updateText('New state text')}>45 Update via State46 </button>47 <button onClick={updateDOMDirectly}>48 Update via DOM49 </button>50 </>51 );52}

Conclusion

Choosing the right text replacement method depends on your specific requirements, performance needs, and accessibility considerations:

String replace() excels at string manipulation, data transformation, and pattern-based replacements with regular expressions
textContent is the fastest method for plain text replacement in the DOM, with built-in security against XSS attacks
innerText should only be used when CSS-aware behavior is specifically required, such as detecting visible text or handling overflow
CSS pseudo-elements provide static text substitution without JavaScript, but require careful attention to accessibility
CSSStyleSheet.replace() enables efficient bulk styling updates and theme switching through the modern Constructable Stylesheets API

In modern applications built with React and Next.js, prefer declarative approaches like React's state management for dynamic text content. Use these DOM methods when building integrations with third-party libraries, implementing animations, or working with non-framework code where direct manipulation is necessary. Our AI automation services can help streamline content updates across your applications.

Understanding the trade-offs between these methods enables you to build performant, accessible, and maintainable web applications that deliver excellent user experiences.

Frequently Asked Questions

Ready to Build Better Web Applications?

Explore our comprehensive web development resources and services to create fast, accessible, and modern web applications that leverage best practices for performance and user experience.

Sources

MDN Web Docs: String.prototype.replace() - Official JavaScript documentation covering pattern matching, replacement functions, and special replacement patterns
MDN Web Docs: CSSStyleSheet.replace() - Documentation for the modern Constructable Stylesheets API
GeeksforGeeks: How to replace text with CSS? - CSS pseudo-element text replacement techniques and accessibility considerations
W3Schools: JavaScript DOM HTML - Tutorial covering textContent vs innerText behavior differences and DOM text manipulation
MDN Web Docs: Element.replaceWith() - DOM replacement specification and browser support documentation