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

What is the best way to send information to a component using Props in Vue2?

Recently, I created a .Vue file to showcase information about a cafe on the Cafe Details Page. However, to streamline template updates, I decided to extract certain parts of this details page and turn it into its own component. This led me to create a new ...

javascriptarraysvue.jsvuejs2vue-cli

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

javascripthtmlajaxhttp-redirect

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

Is there a feature to enable a separate comment box for every tweet, similar to the toggle

Just starting out with jQuery and JS. Want to create a simplified version of Twitter with individual comment boxes for each tweet. Here's my JSFiddle: Currently, the comment box is appearing at the end of the last tweet instead of under each tweet. Ho ...

jquerycss

What methods are commonly used to calculate the bitsPerSecond rate for media recording?

Is there a specific formula that combines frames per second and resolution to determine the bits per second for video encoding? I'm struggling to figure out the appropriate values to use for specifying the bits per second for 720p, 1080p, and 4k video ...

javascriptvideomediarecorderrecordrtc

Interactive navigation with jQuery

I am currently utilizing a jQuery menu script that enhances the navigation structure on my website: (function($) { $.fn.blowfish = function() { // concealing the original ul dom tree $(this).hide(); // constructing a container from top-l ...

jqueryhtml

The parameter value experiences an abrupt and immediate transformation

I recently created an electron app using Node.js and encountered a peculiar issue that I am unable to resolve: Below is the object that I passed as input: { lessons: [ name: "math", scores: [90, 96, 76], isEmpty: false ] } ...

javascriptnode.jsparameterselectronfs

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

Adding a character at the beginning of each loop iteration in a nested array with Vue.js

When working inside a v-for loop, I am attempting to add a character at the beginning of each item in a nested array that may contain multiple items. I have explored various options but have not been successful: :data-filter="addDot(item.buttonFilter ...

javascriptarraysvue.jsvue-component

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

csscomments

Arranging fixed-width <div>s in rows of four for a sequential display

Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...

phpcsssql

Choosing the open status of an HTML list

Is there a way to determine which containers in a list are currently open and which ones are still closed? Currently, I am utilizing the slideDown(), slideDown(), and addClass functions on divs with the specific class="section_hdl_aktiv". However, I want ...

javascriptjqueryslidetoggle

What is it about this JavaScript code that IE8 seems to have a problem with?

Encountered an error in IE8 that has been causing trouble for me SCRIPT65535: Unexpected call to method or property access. load-scripts.php, line 4 character 25690 After removing a .js file from the code, the error disappeared. By commenting out f ...

javascriptjqueryinternet-explorerinternet-explorer-8

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

javascripttypescriptvue.jsvuejs2karma-jasmine

Is there a way to customize the background size of the selected date in the DateCalendar component of MUI?

I need assistance with modifying the background size of DateCalendar's selected date in MUI (material-UI). I attempted to adjust it by changing some CSS properties using styled(DateCalendar) as shown below. However, clicking on dates caused issues wit ...

cssreactjsmaterial-ui

Warning: Unhandled promise rejection - Error encountered while trying to add response due to inability to set headers after they have already been sent to the client

After including the line res.status(201).json({ email });, I encountered an error message saying UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client. How can I address this issue? Here is a ...

javascriptnode.jsexpress

How to return a variable to Express when clicking a button?

Imagine having a list of 10 elements, each with a unique id as their name, and the user has the ability to add more items to the list at any time. If I were to click on an element, my goal is to have Express retrieve the id of that specific element. If it ...

javascriptjquerynode.jsexpress

The update function in model.findByIdAndUpdate() is failing to make changes

I am struggling to update a user model with new data using findByIdAndUpdate(). Despite my efforts, the model does not reflect the changes made. Below is the code snippet where I am attempting to use findByIdAndUpdate() to add an object: const User = ...

javascriptnode.jsmongodbmongoose

Transferring JSON data using DWR (Direct Web Remoting)

Utilizing DWR for AJAX calls in my project involves the conversion of JavaScript objects to Java objects by analyzing the Java class. My goal is to send and receive a JSON-like structure through DWR. For example: JavaScript Object: { "name" : "TamilVe ...

javajavascriptjsondwr