Slicing an asterisk from a label

Question

I am really new to JavaScript and jQuery. I have a form where I have all the required field labels appear with an asterisk (I can't change the HTML) and I plan to remove that and instead add a custom asterisk with its own class.

I am unable to remove the askterisk whatsoever. It would be great if you could assist. All my required field labels appear in the following class - "reg-required-field".

Following is the Markup for one of the field and label.

<div class="reg-field-container">
          <div class="reg-process-row">
              <div class="reg-field-left-column">
                   <label class="reg-required-field" for="ctl00_ContentPlaceHolder1_tbxFirstName">*First name:</label>
              </div>
              <div class="reg-field-right-column">
                   <input name="ctl00$ContentPlaceHolder1$tbxFirstName" maxlength="30" id="ctl00_ContentPlaceHolder1_tbxFirstName" type="text">
              </div>
          </div>
      </div>

The JavaScript that I created -

var myString = document.getElementsByClassName("reg-required-field").textContent;
var newString = myString.slice(1,myString.length);

Thanks!

Answer 1

You can use the String#charAt(index) method to test whether the first character of each .reg-required-field 's text content is an asterisk, and if it is, remove the first character from the text using text.slice(1) . Note that the second argument of slice is, by default, the length of the string being sliced.

document.querySelectorAll('.reg-required-field') can be substituted with document.getElementsByClassName('reg-required-field') if you need to support older browsers.

Edit: I added the ability to customize a .custom-asterisk in your HTML and CSS which will automatically replace the intial '*' in label text. I annotated the code below; let me know if you have any questions.

 var customAsterisk = document.querySelector('.custom-asterisk') // detach the custom asterisk template from the DOM, so you don't see it customAsterisk.parentNode.removeChild(customAsterisk) ;[].forEach.call(document.querySelectorAll('.reg-required-field'), function (e) { var text = e.textContent if (text.charAt(0) === '*') { // remove the '*' e.textContent = text.slice(1) // insert a copy of the .custom-asterisk before the new text e.insertBefore(customAsterisk.cloneNode(true), e.firstChild) } }) 

 .custom-asterisk { color: #f00; } 

 <div class="reg-field-container"> <div class="reg-process-row"> <div class="reg-field-left-column"> <label class="reg-required-field" for="ctl00_ContentPlaceHolder1_tbxFirstName">*First name:</label> </div> <div class="reg-field-right-column"> <input name="ctl00$ContentPlaceHolder1$tbxFirstName" maxlength="30" id="ctl00_ContentPlaceHolder1_tbxFirstName" type="text"> </div> </div> </div> <!-- Customize me! --> <span class="custom-asterisk">*</span> 

Answer 2

className returns an array like object that you have to loop through in order to apply to every element. This is because many elements have the same class. The correct code would likely be (using a for loop to iterate over every element with that class, and your code to remove the first character)

var labels = document.getElementsByClassName("reg-required-field");
for(var i = 0; i < labels.length; i++){
    var oldString = labels[i].textContent;
    var newString = oldString.splice(1, oldString.length);

    labels[i].textContents = newString; // Assign the new string to the element
}

you can shorten the code by combining several lines into one line

var labels = document.getElementsByClassName("reg-required-field");
for(var i = 0; i < labels.length; i++){       
   labels[i].textContent = labels[i].textContent.splice(1, labels[i].length);
}