Determine the quantity of characters available in a contenteditable field

I have implemented a directive that allows me to input editable content inside a tag

Recently, I made modifications to include a character counter feature.

However, I noticed that when I add line breaks, the character count increases erroneously.

https://i.sstatic.net/Ry4aS.jpg

In the image shown, the counter indicates 4 characters although visually there are only two.

https://i.sstatic.net/FsGgV.jpg

In this scenario, the "<" symbol is being counted as 4 characters instead of just one, and not accounting for ">".

I am looking for an accurate way to calculate the number of characters entered.

Below is the directive code used:

directives.directive('contenteditable', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    require: ['^?ngModel'],
    link: function(scope, element, attrs, args) {
      var ngModel = args[0];
      if (ngModel === null) {
        return null;
      }
      // Code logic goes here
      // More code...
    }
  };
}]);

Answer №1

Windows considers a line feed to have 2 characters, while Linux regards it as having only 1 character. Similarly, although visually perceived as empty space, a space is actually considered a character just like the line feed.

The statement "Visually there are only two" is inaccurate because a line feed is clearly visible, making it a visual representation just like a space.

To exclude line feeds from character count, simply remove them before calculating the length. Linefeeds are represented by two characters: \r and \n, so:

var length = content.replace(/\r|\n/g, "").length;

If you wish to eliminate all line feeds, spaces, and other non-visual characters to focus solely on counting the visible characters, you can use the following:

var length = content.replace(/\s+/g, "").length;

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

What is the best way to fill in references that are nested within an array object using mongoose?

How do I go about populating the product fields within the cart array provided below? { "_id": "5bbd1c6e2c48f512fcd733b4", "cart": [ { "count": 1, "_id": "5bbd30ed9417363f345b15fc", "product": "5ba93a6d ...

I'm experiencing a strange issue where the timezone offset is being doubled on my computer, yet it is functioning correctly on the UTC

A situation has arisen where the timezone offset on my local server is being duplicated by the server while creating a new event in my app. For every event created by a user, the client-side scripting computes and adds the time zone offset to the input be ...

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

I have encountered an issue with my setup where the body is empty when sending data through ajax. In Chrome's network tab, I can see the post and content with the correct payload: {"EventName":"asd","PrivacyLevel":1,"TypeInt":1,"ExpectedDate":"asd"," ...

Only switch a radio button when the Ajax call results in success

Within an HTML form, I am working with a group of Radio buttons that trigger an Ajax call when the onchange() event is fired. This Ajax call communicates with the server to process the value sent by the call. The response can either be a string of "succes ...

NextJS able to execute code on the client side after being called from the server side

I am currently using getStaticProps to retrieve data from the server at build time and pass it to my page component. The following call is made from my page component file: const getStaticProps: GetStaticProps = async (context) => { const pa ...

Get a URL from the JSON data returned by the Wikipedia API

How can I retrieve the image URL from a JSON response and store it in a variable? I found helpful information on the MediaWiki API help page Following this example to extract image information from a page: https://commons.wikimedia.org/w/api.php?action= ...

Converting JSON data into an HTML table

I'm struggling to convert a JSON object into an HTML table, but I can't seem to nail the format. DESIRED TABLE FORMAT: Last Year This Year Future Years 45423 36721 873409 CURRENT TABLE FORMAT: Last Year 45423 This ...

What could be causing the Logical Or to fail in my function?

How can I adjust the following sample code to check for not only empty keys but also null and undefined? I attempted: (obj[key] !== '' || obj[key] !== null || (obj[key] !== undefined) However, that approach caused issues and did not function c ...

Set up a cronjob based on the specified time entered in an HTML form

For my HTML form, users enter a time in HH:mm format. I aim to set up a cronjob on the system that will automatically delete a specific file based on the user-provided time. The file itself always remains constant, with only the deletion time varying. Th ...

What is the best way to locate a table of a specific class using jQuery selectors?

Is there a way to specifically target a table with the class "d" using jQuery selectors? I'm having trouble making it work... var dTableTags = $(".d table"); For instance, an example table would look like this... <table id="thetable" class="d"&g ...

Is there a way to implement a targeted hover effect in Vue Js?

I'd like to create a hover button that only affects the nested elements inside it. Right now, when I hover over one button, all the nested elements inside its sibling buttons get styled. Any ideas on how to fix this? <div id="app"> <butto ...

What could be causing my externally hosted React component to malfunction when being imported via NPM?

After successfully creating a standalone component within my original project, I decided to explore the possibility of releasing it as an NPM module. To kick off this process, I attempted to load the library from another repository using NPM in a new proje ...

What's causing this MUI React data grid component to be rendered multiple times?

I have developed a wrapper for the MUI Data Grid Component as portrayed: Selection.tsx: import * as React from 'react'; import { DataGrid, faIR, GridSelectionModel } from '@mui/x-data-grid'; import type {} from '@mui/x-data-grid/t ...

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" ...

Performing an asynchronous request within a dynamic helper (or a suitable substitute) in Express version 2.x

I'm attempting to display the total message count for a user's inbox on my website's layout. I initially thought of utilizing Express' dynamicHelpers to achieve this, but in versions of Express <= 2.x, these helpers do not support as ...

Tips for querying Mongo using Node.js

Although this question may seem repetitive, please bear with me. My goal is to query MongoDB directly from the dom eventually, but for now, I'm working on querying from my routes module. Below is my query: var db = require('./config/db.js&apos ...

Believing that members possess a certain role when they actually do not

const { Discord, MessageEmbed } = require("discord.js"); module.exports = { name: "ban", description: "bans user from guild", execute(client, message, cmd, args, Discord) { const member = message.mentions.u ...

How can I use lodash to locate and include an additional key within an array object?

I am looking to locate and insert an additional key in an object within an array using lodash. I want to avoid using a for loop and storing data temporarily. "book": [ { "name": "Hulk", "series": [ { "name": "mike", "id": " ...

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

When the button is clicked, I desire to reveal the background color of a specific div

<div class="mat-list-item" *ngIf="authService.isAdmin()" (click)="openModal('site-settings', site.siteID)"> <span class="mat-list-item-content">{{ "Application.site_settings_label&q ...