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!

Possible duplicate of [getElementsByClassName not working](http://stackoverflow.com/questions/3349332/getelementsbyclassname-not-working) — Heretic Monkey, Dec 12 '16 at 22:42
Remember, if it's getElements and not getElement, then treat it as an array. Or a container of multiple objects. So Tag Names and Class Names are not unique, and thus contain the potential to return multiple objects. Thus, you'll want to use one of the examples provided below. Or to get the first result, document.getElementsByClassName("reg-required-field")[0].text — hack3rfx, Dec 12 '16 at 22:46

gyre · Accepted Answer · 2016-12-12T22:54:17.857

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>

If I understood the question correctly, there isn't a need to check for asterisks because only required fields (that have asterisks) will have that class. Still good to check, but it might be inefficient if it isn't required. Nice solution! — Max, Dec 12 '16 at 22:47
Honestly, I would be checking the `required` attribute on the HTML tag if it existed, as that is better practice. If someone comes in and forgets the asterisk one day in this code, though, I'd rather not be wondering why the first letter of my text got chopped off. — gyre, Dec 12 '16 at 22:56
That is a convincing argument.. I now think that you are correct in checking for the asterisk — Max, Dec 12 '16 at 22:58
Thanks much! This works great! And you are right, all the required fields appear with an asterisks and this makes them go away. You rock! I modified it a bit and removed the condition to check for asterisks. — Akshay Sachdev, Dec 13 '16 at 18:22
A small thing to ask for, don't hate me for being naive, but how to have this work on load of a page. It works like a charm in console, however it's not working if I add it in the body! @gyre — Akshay Sachdev, Dec 13 '16 at 19:21
@AkshaySachdev make sure you place it at the bottom of the body, so that first the page loads, and then the JavaScript runs. Alternatively, you could research the `onLoad` event listener — Max, Dec 14 '16 at 16:11

score 0 · Answer 2 · answered Dec 12 '16 at 22:43

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);
}

Slicing an asterisk from a label

2 Answers2