Removing non alphanumeric characters from strings is a common task when doing form validation in Javascript. Non-alphanumeric characters include symbols, punctuation, and whitespace. In this article, we’ll explore various methods for achieving this in JavaScript.

Remove non alphanumeric characters – Javascript

1. Regular Expressions

Regex is one common operation to remove non-alphanumeric characters from a string. You can use regex (Regular expressions) pattern matching and string manipulation in JavaScript to remove non-alphanumeric characters by replacing them with an empty string. Here’s an example:

const inputString = "Hello, World!";
const alphanumericString = inputString.replace(/[^a-zA-Z0-9]/g, '');
console.log(alphanumericString); 

"HelloWorld"

In this code, the replace method searches for any characters that are not alphanumeric (specified by the regex /[^a-zA-Z0-9]/g) and replaces them with an empty string.

2. Sring Iteration

You can iterate over each character in a string and build a new string by selectively including only alphanumeric characters. Here’s an example using a for loop in Javascript:

function removeNonAlphanumeric(inputString) {
  let alphanumericString = '';
  for (let i = 0; i < inputString.length; i++) {
    const char = inputString[i];
    if (/[a-zA-Z0-9]/.test(char)) {
      alphanumericString += char;
    }
  }
  return alphanumericString;
}

const inputString = "Hello, World!";
const result = removeNonAlphanumeric(inputString);

console.log(result); // Output: "HelloWorld"

In this method, we test each character with a regex pattern to determine if it’s alphanumeric and then append it to the result string.

3. Regular Expressions with replace and trim

If you want to remove leading and trailing spaces in addition to non-alphanumeric characters, you can use replace and trim together. Here’s an example:

const inputString = "   Hello, World!   ";
const alphanumericString = inputString.replace(/[^a-zA-Z0-9]/g, '').trim();

console.log(alphanumericString); // Output: "HelloWorld"

In this code, replace removes non-alphanumeric characters, and trim eliminates leading and trailing spaces.

4. JavaScript ES6 Filter and Join

ES6 introduced new array methods that make it easier to work with strings. You can use the Array.prototype.filter method to filter out non-alphanumeric characters and then join the resulting array back into a string. Here’s an example:

const inputString = "Hello, World!";
const alphanumericString = inputString.split('').filter(char => /[a-zA-Z0-9]/.test(char)).join('');

console.log(alphanumericString); // Output: "HelloWorld"

In this code, we first split the input string into an array of characters, then use filter to keep only alphanumeric characters, and finally, we join the filtered characters to form a new string.

Different ways to get letters alphabet array in Javascript

Manual Function – Define Alphabet Array

const upperLetters = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
  'M', 'N', 'O', 'P', 'Q', 'R',  'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z' ]
const lowerLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

Using Map Function – Alphabet Array

function generateAlphabetChars(capital = false) {
	return [...Array(26)].map((_, i) => String.fromCharCode(i + (capital ? 65 : 97)));
}

Array of lowercase letters (Javascript function)

generateAlphabetChars();

output:
(26) ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

Array of uppercase letters (Javascript function)

generateAlphabetChars(true);

output:
(26) ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

Using Keys – Characters Array

let alphabet = [...Array(26).keys()].map(i => String.fromCharCode(i + 97));

How to insert multiple HTML elements into an existing tag from Javascript code

You may get into a scenario where all the text or HTML tags need to be read from Notepad through Javascript and perform some action, such as pre-defined information or appending script tags like Google ads on page dynamically. This implementation proves exceptionally useful when you require consistent content across numerous pages. Furthermore, should you anticipate future alterations to this content, this approach allows for seamless updates without necessitating changes to each individual page where it has been incorporated, in such cases this method shows that it works really well.

The following example illustrates how to retrieve multiple HTML elements from a .txt file on the server/URL and add them into an existing <div> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Read text from URL</title>
</head>
<body>

	<!-- declare empty div with Id -->
    <div id="htmlTagsFromURL"></div>

    <script>
        // URL from which you want to fetch the text
        const url = 'https://www.codeindotnet.com/testdemo.txt';

        // Fetch the text content from the URL
        fetch(url)
            .then(response => response.text())
            .then(text => {
                // Select the div element where you want to insert the text
				const existingDiv = document.getElementById('htmlTagsFromURL');
				existingDiv.innerHTML = text;
            })
            .catch(error => {
                console.error('Error fetching the text:', error);
            });
    </script>

</body>
</html> 

In today’s web-driven world, the ability to read text and manipulate data from external sources is a fundamental requirement for web developers. Whether it’s for fetching user data, accessing configuration files, or loading dynamic content, reading text files from URLs is a common task. JavaScript and jQuery, popular scripting libraries, offer various methods to accomplish this task efficiently. In this article, we will explore the different ways to read text files from URLs using both JavaScript and jQuery.

Read file from URL Using JavaScript

JavaScript provides native APIs that allow developers to interact with network resources and retrieve data from URLs. Below are two prominent methods to read text files from URLs using JavaScript:

1. Fetch API

The Fetch API is a modern and more streamlined way of making network requests. It uses Promises to handle asynchronous operations. Here’s how you can use the Fetch API to read a text file:

fetch('your-url-here.txt')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.text();
    })
    .then(textContent => {
        // get the text.
        const result = textContent;
        console.log(textContent);
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

2. XMLHttpRequest

XMLHttpRequest is a browser feature that enables asynchronous communication between a web browser and a server. It can be used to retrieve data from URLs, including text files. Here’s a basic example of how you can use XMLHttpRequest to read a text file:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-url-here.txt', true);

xhr.onload = function () {
    if (xhr.status === 200) {
        // get the text from response.
        const textContent = xhr.responseText;
        console.log(textContent);
    }
};

xhr.send();

Read file from URL Using jQuery

jQuery is a widely used JavaScript library that simplifies DOM manipulation and provides utilities for making AJAX requests. Here’s how you can use jQuery to read text files from URLs:

1. $.ajax()

jQuery’s $.ajax() method is a versatile way to perform AJAX requests, including fetching text files from URLs. Here’s an example:

$.ajax({
    url: 'your-url-here.txt',
    method: 'GET',
    dataType: 'text',
    success: function(textContent) {
        // get the text.
        const result = textContent;
        console.log(textContent);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('AJAX error:', errorThrown);
    }
});

2. $.get()

If you’re only interested in fetching text content, you can use the $.get() shorthand method:

$.get('your-url-here.txt', function(textContent) {
    // get the text.
    const result = textContent;
    console.log(textContent);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', errorThrown);
});

How to Check CKEditor Version in JavaScript

You can check the CKEditor version in JavaScript by accessing the CKEDITOR object and reading its version property. Here’s how you can do it:

// Assuming CKEDITOR is already loaded

if (typeof CKEDITOR !== 'undefined') {
  var ckeditorVersion = CKEDITOR.version;
  console.log('CKEditor Version:', ckeditorVersion);
} else {
  console.log('CKEditor not found');
} 

Make sure you have CKEditor loaded on your webpage before using this code. This code snippet checks if the CKEDITOR object is defined and then retrieves the version using the CKEDITOR.version property. Make sure to check if CKEDITOR is defined & already loaded before attempting to access its properties to avoid errors when CKEditor is not loaded on the page.