JavaScript String Methods — JavaScript Tutorial

Manipulating Text

Strings have many built-in methods for manipulation, searching, and transformation.

These methods make working with text data much easier.

Example

const text = 'Hello World';

// Length
text.length;  // 11

// Case conversion
text.toLowerCase();  // 'hello world'
text.toUpperCase();  // 'HELLO WORLD'

// Searching
text.includes('World');  // true
text.indexOf('World');   // 6
text.startsWith('Hello'); // true
text.endsWith('World');   // true

// Extracting
text.slice(0, 5);      // 'Hello'
text.substring(6, 11); // 'World'
text.charAt(0);        // 'H'

// Replacing
text.replace('World', 'JavaScript');  // 'Hello JavaScript'

// Splitting
'a,b,c'.split(',');  // ['a', 'b', 'c']

// Trimming
'  hello  '.trim();  // 'hello'

// Repeating
'ha'.repeat(3);  // 'hahaha'

// Template literals
const name = 'John';
const greeting = `Hello, ${name}!`;  // 'Hello, John!'

length - String length
toLowerCase/toUpperCase - Change case
includes/indexOf - Search string
slice/substring - Extract portion
replace - Replace text
split - Convert to array
trim - Remove whitespace
Template literals - String interpolation

Try String Methods

HTML

<div class="string-demo">
  <h3>Text Manipulator</h3>
  <textarea id="textInput" placeholder="Enter some text...">Hello World! Welcome to JavaScript.</textarea>
  <div class="buttons">
    <button onclick="toUpper()">Uppercase</button>
    <button onclick="toLower()">Lowercase</button>
    <button onclick="reverseText()">Reverse</button>
    <button onclick="countWords()">Count Words</button>
  </div>
  <div id="textOutput"></div>
</div>

CSS

.string-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; min-height: 80px; font-family: Arial; font-size: 14px; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
button { padding: 10px 15px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; }
#textOutput { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; min-height: 40px; }

JavaScript

function toUpper() {
  const text = document.getElementById('textInput').value;
  document.getElementById('textOutput').innerHTML = `<strong>Uppercase:</strong><br>${text.toUpperCase()}`;
}

function toLower() {
  const text = document.getElementById('textInput').value;
  document.getElementById('textOutput').innerHTML = `<strong>Lowercase:</strong><br>${text.toLowerCase()}`;
}

function reverseText() {
  const text = document.getElementById('textInput').value;
  const reversed = text.split('').reverse().join('');
  document.getElementById('textOutput').innerHTML = `<strong>Reversed:</strong><br>${reversed}`;
}

function countWords() {
  const text = document.getElementById('textInput').value;
  const words = text.trim().split(/\s+/);
  const chars = text.length;
  const charsNoSpace = text.replace(/\s/g, '').length;
  
  document.getElementById('textOutput').innerHTML = `
    <strong>Text Statistics:</strong><br>
    Words: ${words.length}<br>
    Characters (with spaces): ${chars}<br>
    Characters (no spaces): ${charsNoSpace}<br>
    First word: ${words[0]}<br>
    Last word: ${words[words.length - 1]}
  `;
}

Notes

String methods don't modify the original string - they return a new string!