DEV Community: sam khan

How to Remove Special Characters in JavaScript Without Breaking Unicode Text

sam khan — Mon, 28 Sep 2026 11:53:58 +0000

Cleaning text sounds simple until your input contains accented letters, punctuation, emoji, line breaks and characters from different languages.

A common approach is to use a regular expression that removes everything except A–Z, a–z and 0–9. That works for a narrow set of English-only inputs, but it can also delete valid letters from names and words such as café, München and São Paulo.

In this tutorial, we’ll build a small JavaScript function that removes special characters while preserving Unicode letters, numbers and spaces.

The problem with a basic regular expression

You may have seen code like this:

const cleaned = text.replace(/[^a-zA-Z0-9 ]/g, "");

It removes punctuation and other characters, but it also removes letters outside the specified English alphabet.

For example:

const text = "Café ☕ costs €5!";

console.log(text.replace(/[^a-zA-Z0-9 ]/g, ""));
// "Caf  costs 5"

The é disappears even though it is a letter. That may be unacceptable when processing names, international content or multilingual text.

A Unicode-aware solution

Modern JavaScript supports Unicode property escapes in regular expressions. We can use \p{L} for letters and \p{N} for numbers.

function removeSpecialCharacters(text) {
  return text.replace(/[^\p{L}\p{N} ]/gu, "");
}

const input = "Café ☕ costs €5!";
console.log(removeSpecialCharacters(input));
// "Café  costs 5"

Here’s what the regular expression does:

\p{L} matches Unicode letters.
\p{N} matches Unicode numbers.
The literal space allows ordinary spaces.
[^...] matches characters outside the allowed set.
The u flag enables Unicode-aware matching.
The g flag processes all matches, not just the first one.

This preserves accented letters while removing the coffee emoji, currency symbol and punctuation.

Clean up extra spaces too

Removing symbols can leave multiple spaces behind. If you want a tidy single-line result, normalize the spacing afterward.

function cleanText(text) {
  return text
    .replace(/[^\p{L}\p{N} ]/gu, "")
    .replace(/ +/g, " ")
    .trim();
}

console.log(cleanText("Café ☕ costs €5!"));
// "Café costs 5"

The second replacement collapses consecutive ordinary spaces into one, and trim() removes spaces at the beginning and end.

Be careful with this version if your input contains multiple lines: the first replacement removes line breaks. If preserving paragraphs matters, use a different pattern.

Preserve line breaks when needed

For multiline text, you can explicitly allow \n and \r:

function cleanMultilineText(text) {
  return text
    .replace(/[^\p{L}\p{N} \r\n]/gu, "")
    .replace(/ +/g, " ")
    .trim();
}

const input = "First line! 🚀\nSecond line: Café.";

console.log(cleanMultilineText(input));
// First line
// Second line Café

This keeps line breaks while removing punctuation and emoji.

What about apostrophes and hyphens?

Not every punctuation mark is unwanted. Removing the apostrophe from don't produces dont, and removing a hyphen from well-known produces wellknown.

If your use case requires those characters, add them to the allowed set:

function cleanReadableText(text) {
  return text
    .replace(/[^\p{L}\p{N} '\-\r\n]/gu, "")
    .replace(/ +/g, " ")
    .trim();
}

console.log(cleanReadableText("A well-known café — don't miss it!"));
// "A well-known café  don't miss it"

The right cleaning rule depends on what the text will be used for. Search queries, display text, usernames and data imports often need different rules.

When to use a browser-based tool instead

If you only need to clean a few passages, writing and running JavaScript may be unnecessary. A browser-based tool can be more convenient for a one-off task.

TextNivo has a Remove Special Characters tool for stripping special characters while keeping letters, numbers and spaces.

Try the tool: []

For repeatable processing inside an application, keep the logic in code and add tests for the kinds of text your users actually enter.

Final thoughts

A regular expression can remove unwanted characters in one line, but the definition of “unwanted” matters.

For international text, Unicode property escapes are generally more appropriate than an English-only character range. Decide whether you need to preserve spaces, line breaks, apostrophes or hyphens before applying the cleaning rule.

Most importantly, test your function with realistic input—not just a simple English sentence.

How to Count Words and Characters in JavaScript Without a Library

sam khan — Sun, 27 Sep 2026 17:10:15 +0000

Counting words and characters is a common feature in writing tools, form fields, blog editors, and social media applications.

JavaScript makes it possible to build a simple text counter without installing any external libraries. In this tutorial, we'll create a word and character counter that updates as the user types.

We'll also look at how spaces, line breaks, and emoji affect the results.

1. Create the HTML

Start with a textarea where users can enter their text. Below it, add three elements to display the results.

<textarea id="textInput" rows="8" placeholder="Type or paste your text here..."></textarea>

<p>Words: <span id="wordCount">0</span></p>
<p>Characters: <span id="characterCount">0</span></p>
<p>Characters without spaces: <span id="noSpaceCount">0</span></p>

The textarea provides the input, while the three spans display the calculated counts.

2. Count Words Using JavaScript

A simple way to count words is to trim the text and split it using whitespace.

function countWords(text) {
  const trimmed = text.trim();

  if (trimmed === "") {
    return 0;
  }

  return trimmed.split(/\s+/).length;
}

The trim() method removes whitespace from the beginning and end of the text.

The regular expression /\s+/ splits the text wherever it finds one or more whitespace characters, including spaces, tabs, and line breaks.

This is a useful approach for a basic English-language word counter. More advanced counters may need language-specific word segmentation.

3. Count Characters

JavaScript provides the length property to measure the length of a string.

function countCharacters(text) {
  return text.length;
}

For ordinary English text, this produces the expected character count in most cases.

However, JavaScript string length counts UTF-16 code units. Some characters, including many emoji, use more than one code unit.

If you want to count Unicode code points instead, you can use:

function countCodePoints(text) {
  return Array.from(text).length;
}

Even this method does not always count what a person sees as one character. Some emoji sequences and combined characters contain multiple code points.

4. Count Characters Without Spaces

Sometimes you need to calculate the number of characters while excluding whitespace.

function countWithoutSpaces(text) {
  return text.replace(/\s/g, "").length;
}

This function removes whitespace before calculating the string length.

It excludes spaces, tabs, and line breaks. If you want to exclude only ordinary spaces, use text.replace(/ /g, "") instead.

5. Update the Counter as the User Types

Now connect the JavaScript functions to the HTML elements.

const textInput = document.getElementById("textInput");
const wordCount = document.getElementById("wordCount");
const characterCount = document.getElementById("characterCount");
const noSpaceCount = document.getElementById("noSpaceCount");

function updateCounts() {
  const text = textInput.value;

  wordCount.textContent = countWords(text);
  characterCount.textContent = countCharacters(text);
  noSpaceCount.textContent = countWithoutSpaces(text);
}

textInput.addEventListener("input", updateCounts);

updateCounts();

The input event runs whenever the textarea's value changes through normal user input, including typing, pasting, and deleting text.

This keeps the displayed counts up to date without requiring a submit button.

6. Test the Word and Character Counter

Try entering the following text:

JavaScript makes text analysis easy.

The basic counter should display:

Words: 5
Characters: 36
Characters without spaces: 32

Next, try entering multiple spaces, blank lines, and emoji to see how the counting functions behave.

Testing different inputs helps you understand how JavaScript handles text and whitespace.

7. Try an Online Text Counter

Building your own counter is a useful way to learn JavaScript string manipulation and DOM events.

For everyday writing, you can also use the TextNivo Word Counter to analyze text without writing code.

If you already know the number of characters but need to estimate the equivalent number of words, the Characters to Words Converter is designed for that different task.

Conclusion

You've built a simple word and character counter using plain JavaScript.

The project demonstrates how to work with strings, regular expressions, DOM elements, and input events.

You can extend it by adding a reading-time estimator, a character-limit indicator, or a sentence counter.

For more JavaScript text-processing examples, explore the TextNivo Text Utilities project on GitHub.

How to Build a Character-to-Word Calculator with JavaScript

sam khan — Sun, 27 Sep 2026 17:01:19 +0000

Character limits are common in online forms, writing assignments, social media posts, and content management systems. But how can you estimate the number of words when you only know the character count?

In this tutorial, we'll build a simple character-to-word calculator using JavaScript. The calculator will provide a range rather than an exact word count, because words vary in length.

1. Understanding Character-to-Word Conversion

There is no universal formula for converting characters into words. For example, a sentence containing short words can have more words than another sentence with the same character count but longer words.

A practical calculator can use assumptions about average characters per word, including spaces, to produce an approximate range.

For this example, we'll use:

6.5 characters per word for the lower word estimate.
5.75 characters per word for the typical estimate.
5 characters per word for the upper word estimate.

These are illustrative assumptions, not fixed rules for every language or writing style.

2. Create the JavaScript Function

Let's create a function that accepts a character count and returns three estimates.

function charactersToWords(characters) {
  if (!Number.isSafeInteger(characters) || characters < 0) {
    throw new RangeError(
      "Character count must be a non-negative integer."
    );
  }

  return {
    characters,
    minimumWords: Math.round(characters / 6.5),
    typicalWords: Math.round(characters / 5.75),
    maximumWords: Math.round(characters / 5)
  };
}

The function validates the input first, then calculates the estimated word range. This prevents negative numbers, decimals, and invalid values from producing misleading results.

3. Test the Calculator

Now let's estimate how many words 3,000 characters might represent.

console.log(charactersToWords(3000));

The result is:

{
  characters: 3000,
  minimumWords: 462,
  typicalWords: 522,
  maximumWords: 600
}

Using these assumptions, 3,000 characters represent approximately 462–600 words, with a typical estimate of 522 words.

4. Try Different Character Counts

We can also test the function with several other values.

const characterCounts = [500, 1000, 1700, 3000, 10000];

characterCounts.forEach(count => {
  console.log(charactersToWords(count));
});

This approach is useful when building writing tools, content editors, or applications that need to display approximate word counts before text has been written.

5. Why the Result Is an Estimate

Character-to-word conversion cannot provide an exact result without the actual text. Word lengths, spaces, punctuation, numbers, and writing style all affect the relationship between characters and words.

If you already have the text, counting the words directly is more accurate. If you only know the character limit, an estimated range can help you plan your writing.

6. Explore the Code and Live Calculator

You can explore the JavaScript implementation in the TextNivo Text Utilities GitHub repository.

If you prefer an interactive tool, the TextNivo Characters to Words Converter lets you enter a character count and see an estimated word range. It also supports estimating characters from a word count.

Conclusion

Building a character-to-word calculator is a useful exercise in JavaScript functions, input validation, and mathematical estimation. It also demonstrates why an approximate range can be more informative than presenting a single number as an exact answer.

You can extend the project with an HTML input, a conversion-direction selector, and a live results display.

How to Build a Word and Character Counter with JavaScript

sam khan — Sun, 27 Sep 2026 10:21:22 +0000

How to Build a Word and Character Counter with JavaScript

Word and character counters are useful in text editors, blogging platforms, social media applications, and content management systems.

In this tutorial, we'll build a simple word and character counter using HTML, CSS, and vanilla JavaScript. Our counter will update instantly as users type, without requiring any external libraries.

1. Create the HTML

First, create an index.html file and add a textarea where users can enter their text.

<div class="container">
  <h1>Word and Character Counter</h1>

  <textarea
    id="textInput"
    placeholder="Start typing here..."
    rows="8"
  ></textarea>

  <div class="stats">
    <p>Words: <span id="wordCount">0</span></p>
    <p>Characters: <span id="charCount">0</span></p>
    <p>Characters without spaces:
      <span id="charNoSpaces">0</span>
    </p>
  </div>
</div>

We'll use JavaScript to update the three counters whenever the text changes.

2. Add Some CSS

Let's give our counter a clean, responsive layout.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f6fb;
  padding: 30px;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

textarea {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

3. Write the JavaScript

Now let's implement the counting logic.

const textInput = document.getElementById("textInput");

const wordCount = document.getElementById("wordCount");
const charCount = document.getElementById("charCount");
const charNoSpaces = document.getElementById("charNoSpaces");

function updateCounts() {
  const text = textInput.value;

  const words = text.trim()
    ? text.trim().split(/\s+/u).length
    : 0;

  const characters = text.length;

  const withoutSpaces = text.replace(/\s/gu, "").length;

  wordCount.textContent = words;
  charCount.textContent = characters;
  charNoSpaces.textContent = withoutSpaces;
}

textInput.addEventListener("input", updateCounts);

updateCounts();

How does it work?

The input event fires whenever the user changes the textarea's value through typing, pasting, or deleting text.

We use trim() to remove leading and trailing whitespace, then split the remaining text using a regular expression that matches one or more whitespace characters.

The character counter uses JavaScript's length property, while the counter without spaces removes whitespace before calculating the length.

One important detail: JavaScript's length counts UTF-16 code units. Some emoji and other Unicode characters can therefore count as more than one character.

4. Test Your Counter

Try entering the following text:

Hello world! JavaScript is awesome.

The counter should display:

Words: 5
Characters: 35
Characters without spaces: 30

Try pasting longer paragraphs, adding line breaks, and deleting text to make sure everything updates correctly.

5. Try a Text Analysis Tool

Building a counter yourself is a great way to understand JavaScript string manipulation and DOM events.

For everyday writing and content editing, you can also explore TextNivo, a collection of online tools.

I recommend experimenting with your own implementation first, then comparing its results with other text-processing tools.

6. Ideas for Improving the Project

Once your basic counter works, consider adding:

A reading-time estimator.
Sentence and paragraph counting.
A character limit with a visual progress indicator.
A copy-to-clipboard button.
More advanced Unicode-aware character counting.

These features can turn a simple beginner project into a more useful text analysis application.

Final Thoughts

A word counter is a small project, but it teaches several important JavaScript concepts, including DOM manipulation, event listeners, regular expressions, and string processing.

You can build on these fundamentals to create more advanced text editors and writing tools.

What feature would you add to this project next?

10 PHP Best Practices Every Developer Should Know in 2026

sam khan — Sun, 27 Sep 2026 10:06:43 +0000

10 PHP Best Practices Every Developer Should Know in 2026

PHP remains a widely used language for building websites, APIs, content management systems, and web applications. Whether you're working with WordPress, Laravel, or plain PHP, following good development practices makes your code more secure, readable, and maintainable.

In this article, I'll share 10 practical PHP best practices with examples you can apply to your next project.

1. Use Strict Types

PHP supports type declarations that help make your code more predictable.

Add declare(strict_types=1); at the beginning of your PHP files when appropriate.

<?php

declare(strict_types=1);

function addNumbers(int $a, int $b): int
{
    return $a + $b;
}

echo addNumbers(10, 20);

Strict typing reduces unexpected type coercion for supported declarations and helps catch certain mistakes earlier.

2. Follow Consistent Coding Standards

Readable code is easier to debug, maintain, and share with other developers.

Use consistent naming conventions, indentation, and formatting throughout your project.

For modern PHP projects, consider following the PHP-FIG PSR-12 coding style.

<?php

class UserService
{
    public function getUserName(string $name): string
    {
        return trim($name);
    }
}

Consistency is particularly important when multiple developers work on the same codebase.

3. Use Prepared Statements for Database Queries

SQL injection is a serious security risk in web applications.

Avoid inserting user input directly into SQL queries. Instead, use prepared statements with bound parameters.

<?php

$stmt = $pdo->prepare(
    'SELECT * FROM users WHERE email = :email'
);

$stmt->execute([
    'email' => $email,
]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

Prepared statements help separate SQL code from user-supplied values.

Remember that parameters cannot replace SQL identifiers such as table or column names. Use an allowlist for dynamic identifiers.

4. Validate Input and Escape Output

Never assume that data submitted by users is safe or correctly formatted.

Validate input according to the data your application expects.

<?php

$email = filter_input(
    INPUT_POST,
    'email',
    FILTER_VALIDATE_EMAIL
);

if ($email === false || $email === null) {
    echo 'Invalid email address.';
}

When displaying user-generated content in HTML, escape it appropriately.

<?php

echo htmlspecialchars(
    $username,
    ENT_QUOTES | ENT_SUBSTITUTE,
    'UTF-8'
);

Input validation and output escaping solve different problems. Both are important for secure applications.

5. Use Composer for Dependency Management

Composer makes it easier to install, update, and manage PHP packages.

For example, you can install a package using:

composer require monolog/monolog

Composer also generates an autoloader, so you don't need to manually include every class file.

<?php

require __DIR__ . '/vendor/autoload.php';

Commit your composer.json and composer.lock files for applications to help maintain reproducible dependency versions.

6. Handle Errors and Exceptions Properly

A production application should handle errors without exposing sensitive technical information to visitors.

Use exception handling where you can meaningfully recover from or respond to an error.

<?php

try {
    $result = $pdo->query('SELECT * FROM users');

    $users = $result->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log($e->getMessage());

    http_response_code(500);

    echo 'Something went wrong. Please try again later.';
}

Log errors securely, and avoid displaying database credentials, stack traces, or internal file paths to users.

7. Never Store Plain-Text Passwords

Passwords should never be stored as plain text.

PHP provides built-in functions for securely hashing and verifying passwords.

<?php

$password = 'example-password';

$hash = password_hash(
    $password,
    PASSWORD_DEFAULT
);

if (password_verify($password, $hash)) {
    echo 'Password verified.';
}

Store the generated hash in your database, not the original password.

For production applications, also consider login rate limiting, secure password reset flows, and multifactor authentication.

8. Keep Your Code Modular

Avoid putting all your application logic into a single large PHP file.

Separate responsibilities into appropriate classes, functions, and components.

For example, a small project might use this structure:

project/
├── public/
│   └── index.php
├── src/
│   ├── Controllers/
│   ├── Services/
│   └── Models/
├── config/
├── tests/
├── vendor/
└── composer.json

A modular structure makes it easier to test individual components, fix bugs, and add new features.

9. Optimize Database Queries

Poor database queries can slow down even a well-written PHP application.

Instead of retrieving every column, select only the data you need.

<?php

$stmt = $pdo->prepare(
    'SELECT id, name, email
     FROM users
     WHERE status = :status
     LIMIT 20'
);

$stmt->execute([
    'status' => 'active',
]);

$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

For larger applications, consider appropriate database indexes, pagination, caching, and query profiling.

Measure performance before making optimizations so you can focus on actual bottlenecks.

10. Keep PHP and Dependencies Updated

Keeping your PHP environment updated is an important part of application security and maintenance.

Use a currently supported PHP release, install security updates, and regularly review your dependencies.

You can inspect outdated Composer packages with:

composer outdated

Before upgrading a production application, test compatibility in a staging environment.

If you develop WordPress websites, also keep WordPress core, themes, and plugins updated, and maintain reliable backups.

Final Thoughts

Writing good PHP isn't just about making your code work. It's about building applications that are secure, maintainable, and easier to improve over time.

By following these practices, you can improve your development workflow and build a stronger foundation for future projects.

Which PHP best practice has made the biggest difference in your development workflow? Share your experience in the comments!