What is the best way to restore the original form of a string after using string.replaceAll in javascript

To ensure accurate spelling check in JavaScript, I need to implement text normalization to remove extra whitespaces before checking for typos. However, it is crucial to keep the original text intact and adjust typo indexes accordingly after normalization.

Normalizing the text allows me to cache the results so that I can easily retrieve them without having to run the spell check again each time.

The process involves three main steps:

  1. Replace multiple whitespaces with a single space.
// "I      lik cat." -> "I lik cat"
// "I lik       cat." -> "I lik cat"
const regex = / +/ig;
"I      lik cat.".replaceAll(regex, ' ')
"I lik       cat.".replaceAll(regex, ' ')

  1. Identify the location of words in the cleaned text.
// "lik" starts at index 2.
let regexp = /lik/g;
let str = 'I lik cat.';
let starting_indexes = [];
let matches = [...str.matchAll(regexp)];
matches.forEach((match) => {
   starting_indexes.push(match.index);
});
  1. Revert the normalized text back to its original form and readjust the starting indexes accordingly.
"I lik cat" -> "I      lik cat.", starting index = 6
"I lik cat" -> "I lik       cat.", starting index = 2

I am still exploring ways to efficiently revert normalized text back to its original state.

Answer №1

When conducting a spell check and highlighting errors, worrying about spaces is unnecessary. In my response, I utilize a regex in the replacement process to preserve the original string while wrapping specific strings in mark tags and assigning them to a new variable.

const output = document.querySelector(".output");
const original = document.querySelector(".original");
const regexp = /(lik)/ig;

let str = "I lik C                   AT. A                      cat I lik.";

original.innerHTML = str;

const newOutput = str.replace(regexp,"<mark>$1</mark>");
output.innerHTML = newOutput;
mark {
  background: transparent;
  border-bottom: 1px solid #ff0000;
}
<div class="output"></div>
<div class="original"></div>

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

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

My Fullcalendar is displaying events for the upcoming month. How can I resolve this issue?

This is the start date for my event in the full calendar: start: new Date('2016', '02', '07', 00, 30) However, when loading the calendar, this event is displaying on March 7, 2016. How can I resolve this issue? ...

Issue with executing a jQuery event within a JavaScript object due to application error

I am struggling to comprehend how to set listeners in my JavaScript object. For instance: var obj = function(){ this.test = function(){ console.log('test'); } $(document).on('click','#test',(function(){ ...

The Node.js Express server seems to be having trouble accessing static files

After successfully starting the express server, I encountered an issue when trying to load static files which resulted in an error message reading "Cannot GET /URL". The static files are located within a folder named "Login" and both the app.js and "Logi ...

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

Reviewing the source code: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; import { HomePage } from './home.page'; import { LevelGridComponent } from &a ...

Tips for passing data to a child component from a computed property

Currently in the process of setting up a filter using vue-multiselect. Everything seems to be working fine, but there's one issue I can't seem to resolve. Upon page reload, the label (v-model) appears empty. The root cause seems to be that the v ...

Retrieve the node-postgres result and store it in a separate object beyond the callback function

Currently, I am in the process of converting a data profiling script originally written in Python to JavaScript while following the Wes Bos beginner Javascript Course. This script is designed to take database connection details and a specified target tabl ...

I'm having trouble getting my ms-auto to properly align the contents within a div

I've been trying to use the ms-auto class in my code, but it doesn't seem to be working properly: <div class="p-5 rounded bg-light text-dark"> <div class="container row"> <div class="col-sm-6"> ...

Develop a plugin architecture using JavaScript and Node.js

Here is a basic implementation using node.js with express: var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000); I am interested in creatin ...

What could be the reason for parent props not updating in child components in VueJS?

Hello, I am new to VueJS and encountering an issue. In the main.js file, I am passing the user variable to App.vue using props. Initially, its value is {} The getLoginStatus() method in main.js monitors the firebase authentication status, and when a user ...

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

What is the best method for showing information beneath each tab?

Here is my CodePen link: https://codepen.io/santoshch/pen/MWpYdXK .tab1border{ border-right: 2px solid #f0f0f0; } .tab2border{ border-right: 2px solid #f0f0f0; } .tab3border{ border-right: 2px solid #f0f0f0; } .tab4border{ border-right: 2px soli ...

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

Switching Json to Typescript

I have a file named items.ts with the following interface: export interface item{ Name: string; IsSystemItem: string; ConfiguredSegments: ConfiguredSegments; } export interface ConfiguredSegments { LiveA: LiveA; } export interface LiveA { Weig ...

Add up the values in the table by organizing them into groups

There is a table below that I am working with: <table> <tr> <th>Category</th> <th>Value</th> </tr> <tr> <td class="cat1">cat1</td> <td class="value" ...

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

After installing the html2canvas package in my Angular library project, I encountered an error when compiling in production mode using the command ng build --prod. The specific error message is as follows: ERROR: Dependency @types/html2canvas must be exp ...

Issue with retrieving the value of a JavaScript dynamically generated object property

I'm currently working on a React Material-UI autocomplete component and facing challenges with accessing a Javascript Object property within a handleSelect function. Although I can retrieve the townname value using document.getElementById, I know thi ...

Tips for populating an HTML input with the value of a link element using JQuery

I have a form input that I want to populate with autocomplete suggestions from my database using Ajax. To style the list, I am using bootstrap 4, and I have opted to use the <a></a> tag instead of the <li></li> tag. This is because ...

Creating registration and login forms using an express server

Currently, I'm in the process of creating a basic website on my localhost that incorporates a signup form along with other essential HTML elements. The setup for the signup procedure went smoothly as planned. When a user completes the form and submits ...