Eliminate invisible characters like ZERO WIDTH SPACE (unicode 8203) from a JavaScript string

As I work on my JavaScript code to process website content, I've come across a frustrating issue with the SharePoint text editor. It has a tendency to insert a "zero width space" character (Unicode value 8203 or B200 in hexadecimal) when the user hits backspace. Despite my attempts to remove it using the default "replace" function, I have not been successful. Various variations of the code such as:

var a = "o​m"; //the invisible character is between o and m

var b = a.replace(/\u8203/g,'');
= a.replace(/\uB200/g,'');
= a.replace("\\uB200",'');

have all failed to eliminate the unwanted character. Strangely, typing the actual character in the expression seems to be the only effective method:

var b = a.replace("​",''); //it's there, believe me

This approach comes with its own set of challenges since the character is invisible, making the code line somewhat perplexing. Moreover, if the file encoding changes or is deployed to SharePoint where encoding may differ, this solution may cease to work. Is there a way to address this using Unicode notation instead of relying on the character itself?

[Musings about the zero-width space]

If you're unfamiliar with this elusive character (which most likely is the case, given its invisibility unless it causes issues in your code), it can wreak havoc on certain pattern matching functions. Here's what it looks like when caged:

[​] <- careful, don't let it escape.

To view it, copy these brackets into a text editor and move your cursor over them. You'll notice that it takes three steps to cover what appears to be two characters, with a skipped step in between.

Answer №1

When using a unicode escape, it's important to remember that the number should be in hexadecimal format. For example, the hexadecimal representation of 8203 is 200B, which corresponds to a Unicode zero-width space. Here's how you can use this in JavaScript:

var newText = oldText.replace(/\u200B/g,'');

Check out this live example:

var oldText = "o​m"; //there is an invisible character between o and m
var newText = oldText.replace(/\u200B/g,'');
console.log("oldText length = " + oldText.length);      // 3
console.log("oldText === 'om'? " + (oldText === 'om')); // false
console.log("newText length = " + newText.length);      // 2
console.log("newText === 'om'? " + (newText === 'om')); // true

Answer №2

The solution provided as the accepted answer did not solve my issue.

However, I found success with the following code:

text.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, '')

Answer №3

For additional information, please refer to this response. You can identify the entire "category" (which includes zero-width space, zero width joiner, zero-width non-joiner, and several others - as listed in the table titled "Related Unicode characters with property White_Space=no" in this Wikipedia post) by following this method:

let a = "o​m"; // an invisible character separates o and m
console.log(a.length) // 3
console.log(a.replace(/\p{Cf}/gu, '').length) // 2

The abbreviation "Cf" stands for "Category: format"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the Angular UI grid containing data from the textboxes once the information has been submitted

I recently started working on an angularjs application and I am facing some challenges in finding the solution. Any advice or suggestions would be greatly appreciated. My goal is to dynamically display an angular UI-grid based on the text selected in the ...

Searching for an object in a more efficient manner

At times, I often find myself needing to locate a specific object within an array of objects where the key I am searching for matches a particular value. For instance: var cars = [ { id:23, make:'honda', color: 'green' }, { id ...

Encountering a 404 error while sending a session ID in a Post request using AngularJS

My services are hosted on a remote server, and I am consuming these services in a local AngularJS app. Everything works fine with REST requests that do not require a SessionID in the header. However, when I add the Session ID in the header, it does not wor ...

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

What alternative methods are available to rename a field that has been returned in mongoose, if at all possible?

I need help with this specific query: MessageModel.find({ conversationId: { $in: ids } }) .sort({createdAt: 'ascending'}) .populate({ path: 'receiver', select: '_id' }) .populate({ path: &a ...

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

Avoid production build warnings in Vue.js without the need to build the code

Experimenting with vuejs, I decided to use it for a simple page even though I could have achieved the same without any framework. Now, my project is nearly production ready. The only issue is that it's just a single js and html file, but it shows thi ...

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

Identifying Changes in Form Values Using jQuery

I am facing a challenge with a dynamic form that needs to detect the field sequence properly. Below is my JavaScript file: var i = 1; $("a.add-line").click(function(){ $("div.items").append( $('<div>').attr('id',&ap ...

What are the benefits of using multiple image display in React JS?

Can someone explain to me the process of displaying multiple images in React.js? I am attempting to load an image using canvas and have tried the following code: https://codesandbox.io/s/o4o98kwy0y class App extends Component { constructor() { sup ...

What is the process for comprehending an event that is not triggered by the task queue within the event loop specifications?

According to the guidelines: Various events are triggered through tasks apart from just the task queue. I am curious to understand what exactly is meant by "various" and the specific types of tasks being referred to here? ...

Transmitting a Custom JS Object via Vue Router

Stuck! I’ve been hitting my head against the wall for hours trying to figure this out... Technologies Utilized: Vue (v3.0.0) Vue-Router (v4.0.0-0) Bootstrap (v5.1.1) The Objective: I have two pages (Home.vue, MetaUpdate.vue) and one component (Docum ...

In what way can you retrieve scope values (when testing) from an Angular controller implemented in TypeScript?

When working with Angular controllers in TypeScript, you have the option to define your controller in a way that accepts the $scope as an input parameter: class TestCtrl { constructor($scope:ng.IScopeService) { $scope.myData = "Information"; ...

Creating multiple objects using a single object in JavaScript can be achieved by using the concept of object

When presented with the following data structure: { "time_1": 20, "time_2": 10, "time_3": 40, "time_4": 30 } and expecting a result in this format: [ { "key1": "time_1" ...

Signal for a complete 360 degree rotation of an image

Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js: (function(){ if( $('#first').css('visibility','hidden')) { $('#rotat ...

Tips for embedding external URLs into a div element without using an iframe

I need help loading an external URL into a div without using iframe, embed, or object tags. I have tried examples but they do not seem to be working properly. Here is an example of what I have tried: $("#testDiv").load("//localhost:8000/cities/Mountain%2 ...

Transforming a JSON file that has been previously converted to an Observable into a TypeScript map within an Angular application

There is a json data file named dummy, with the following structure: [ {"key":"KEY1", "value":["alpha","beta","gamma"]}, {"key":"KEY2", "value":["A","B","C"]}, {"key":"KEY3", "value":["One","Foo","Bar"]} ] The goal is to convert this json f ...

Tips for executing flushall just once across various clusters with Node.js and Redis

Whenever my server starts up, I find myself needing to clear out the Redis memory. However, each time a new cluster is formed, it triggers a flushall command that wipes out everything in memory. Is there a way to only run flushall once on the very first se ...

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

Juggling between setting state in React Native and saving in asyncStorage simultaneously

I have developed a react native app module that tracks health statistics, specifically focusing on weight. When the dashboard loads, there is an empty component with a button that opens an editor modal. This modal provides a text input where the user can e ...