Slicing ein Sternchen von einem Etikett

Question

Ich bin wirklich neu in JavaScript und jQuery. Ich habe ein Formular, in dem ich alle erforderlichen Feldbezeichnungen mit einem Sternchen erscheinen lasse (ich kann das HTML nicht ändern), und ich plane, das zu entfernen und stattdessen ein benutzerdefiniertes Sternchen mit seiner eigenen Klasse hinzuzufügen.

Ich kann den askterisk überhaupt nicht entfernen. Es wäre toll, wenn Sie helfen könnten. Alle meine erforderlichen Feldbezeichnungen erscheinen in der folgenden Klasse - "reg-required-field".

Im Folgenden ist das Markup für eines der Feld und 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> 

Das JavaScript, das ich geschaffen -

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

Dank!

Answer 1

können Sie die String#charAt(index) Methode verwenden, ob das erste Zeichen jedes .reg-required-field ‚s Textinhaltes zu testen, ein Stern ist, und wenn es ist, um das erste Zeichen aus dem Text mit text.slice(1) entfernen. Beachten Sie, dass das zweite Argument slice standardmäßig die Länge der zu schneidenden Zeichenfolge ist.

document.querySelectorAll('.reg-required-field') kann mit document.getElementsByClassName('reg-required-field') ersetzt werden, wenn Sie ältere Browser unterstützen müssen.

Edit: Ich habe die Möglichkeit, eine .custom-asterisk in Ihrem HTML und CSS anpassen, die automatisch den intial '*' in Beschriftungstext ersetzen wird. Ich habe den folgenden Code kommentiert; Lass es mich wissen, wenn du irgendwelche Fragen hast.

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 gibt einen Array wie Objekt, das man durch auf jedes Element, um in einer Schleife hat anzuwenden. Dies liegt daran, dass viele Elemente dieselbe Klasse haben. Der richtige Code wahrscheinlich (mit einer for Schleife jedes Element mit dieser Klasse iterieren, und Ihr Code das erste Zeichen entfernen) würde

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 
} 

Sie den Code durch die Kombination mehrere Zeilen in eine Zeile verkürzen

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