Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt

I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is'.

I've explored different options without success. My expertise lies in CSS and HTML, not so much in JS.

While this request may seem odd with this example, I want to initiate a sentence with an alphabet letter. For instance:

<h1>A
  <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ " great day.", "pple.", "wesome.", " shinny diamond."]'></span>

The current output from the JS results in "A great day.", "A pple.", "A wesome.", "A shinny diamond." Can you help me get rid of the additional space? Thank you.

javascripthtmlcss

Answer №1

Don't forget to eliminate the space or new line after A

<h1>A<span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ " fantastic day.", "pple.", "incredible.", " sparkling diamond."]'></span>

Interactive Example

https://codepen.io/aswinkumar863/pen/NWpEygj

Answer №2

If you want to eliminate several spaces, you can utilize the replace(/ +/g, ' ') method.

Answer №3

Among the various solutions available, I find the following method to be the simplest and most convenient.

     $(document).ready(function(){
     var value=$(".txt-rotate").attr('data-rotate');
     val_array=JSON.parse(value);
     var array = val_array.map(function (el) {
    return el.trim();
        });
        array = '\'' + array.join('\',\'') + '\'';
        array="["+array+"]";
    
     $(".txt-rotate").attr('data-rotate',array);
     });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>A
  <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ " great day.", "pple.", "wesome.", " shinny diamond."]'></span>

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

Adapting language in real-time: DateTimePicker jQuery Plugin

I am looking to dynamically adjust the language settings of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) but I keep encountering an "undefined" error for the lang1 variable within the final plug-in function call: <!DO ...

javascriptjquerydatetimepicker

What steps can I take to set up AJAX-based long-polling in Microsoft Edge?

I have been working on setting up a basic long-polling skeleton that functions across different browsers. While my solution works perfectly in Chrome, I am facing difficulties getting it to work in Edge. Upon loading the page in Edge, there are no visible ...

javascriptjqueryajaxinternet-explorerlong-polling

Load JavaScript files in order within the <body> tag and trigger a callback function when all files have

Currently, my website (which is actually a Cordova/Phonegap app) has the following scripts in the <head>: <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="appPolyfills.js"></script> ...

javascriptjqueryhtml

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

Interactive chat feature with live updates utilizing jQuery's $.Ajax feature for desktop users

I came across a script for real-time chat using $.ajax jQuery, but it only refreshes my messages. Here's an example scenario: I type: Hello to You, and I see this message refreshed. You reply: Hey, in order to see your message, I have to manually refr ...

javascriptphpjqueryajaxchat

Utilizing the zIndex property on a map label does not produce any impact when combined with a GeoJSON layer

Utilizing the Google map label tool, I am trying to showcase certain property from GeoJSON data on a GeoJSON layer. However, the issue arises as the layer has a dark color and the label is appearing blurry behind the GeoJSON data layer. Despite attempting ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3geojson

The subsequent block within the code is being initiated following the initial block in Node.js

It was expected that "1" would be printed before "2", but the output is incorrect. fs.readdir("./my_stocks", (err, files) => { for(each in files){ var file=files[each]; if(file!='portfolio.js'){ var fn="./my_sto ...

javascriptnode.jsexpress

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?

There is an array of objects living in a state named talks [ { "firstName": "B", "lastName": "W", "day": "2022-09-30T23:06:26.000Z", "reasons": [ ...

javascriptreactjsmaterial-ui

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

Maintaining the integrity of Jquery Tab even after refreshing the page is essential

I recently started using Jquery and encountered an issue with tab implementation. Whenever I refresh the page, it automatically directs me back to the initial tab setting. $(function() { var indicator = $('#indicator'), i ...

javascriptjqueryajaxtabs

MongoDB table collections (table names in other databases)

After setting up my express server to connect to mongodb, I encountered an issue despite everything working fine initially. I created a collection in my mongodb called projects (plural form). In my project.model.js file, I defined the model as follows: c ...

javascriptnode.jsangularmongodbexpress

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

I am trying to figure out how to update an existing document for the same user ID in V9 Firebase whenever they log in, rather than creating a new one each time. Any suggestions on how to achieve this? Current Code setDoc( query(collectionRef), // ...

javascriptfirebasegoogle-cloud-firestorenext.js

automatically changing radio button selection based on dropdown choice

Let's address the issue at hand: I have a dropdown list with over three options, and alongside it, a radio group for yes or no responses. What I am aiming to achieve is setting the radio button to "no" when option 1 is selected, and to "yes" when any ...

javascripthtml

Unable to create a horizontal navigation bar

After spending a considerable amount of time on this task, I am perplexed as to why the navbar is not aligning horizontally. I have tried various techniques such as floating to the left and using display inline, but nothing seems to be working. Could there ...

htmlcssnavbardreamweaver

When using HTML5 input type number with 16 or more digits, Chrome automatically replaces any extra digits with zeroes

Has anyone else encountered an issue with Chrome related to using the input type number when the number of digits exceeds 16? I've noticed that in my case, any numbers beyond the 16th digit are automatically replaced with a zero when the field loses f ...

htmlgoogle-chromeforms

Combining Nested Objects in MongoDB

I have searched extensively for a solution but I am struggling to find a resolution to my issue. I have two MongoDB (Node.JS) collections: user & statistics. My goal is to merge the results using aggregate. Below are the structures of the collection ...

javascriptnode.jsmongodb

Obtaining the most recently inserted ID in Node.js can be achieved by using

Currently in my Nodejs project, I am using the expressjs framework. I am facing an issue where I am trying to retrieve the "last inserted id", but it is showing as "undefined" in the console. How can I successfully get the last inserted id? Below is the ...

javascriptnode.jsexpress

Are Global variables supported in the EXT JS framework?

When working with Java and C++, it is common practice to store a variable globally so that its value can be accessed from anywhere within the project. For example, if I am working inside a class named Residence and saving an INT as the residenceNumber to a ...

javascriptextjsextjs4extjs4.1

Running React Boilerplate with forever is a great way to ensure your application stays

I plan on keeping the react-boilerplate application running indefinitely on the server. I recently came across forever, but I'm uncertain about how to pass parameters to it. The command to start the server looks like this: PORT=80 npm run start:produ ...

javascriptnode.jsdeploymentforeverreact-boilerplate