從標簽上切一個星號

Question

我真的是JavaScript和jQuery的新手。 我有一個表單，其中所有必填字段標簽都帶有星號（我無法更改HTML），並且我打算刪除該表單，而是使用其自己的類添加自定義星號。

我無法刪除任何問號。 如果您可以提供幫助，那就太好了。 我所有的必填字段標簽都顯示在以下類別中-“ reg-required-field”。

以下是該字段和標簽之一的標記。

<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>

我創建的JavaScript-

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

謝謝！

Answer 1

您可以使用String#charAt(index)方法測試每個.reg-required-field文本內容的第一個字符是否為星號，如果是，請使用text.slice(1) 。 請注意，默認情況下， slice的第二個參數是要切片的字符串的長度。

document.querySelectorAll('.reg-required-field')可以與取代document.getElementsByClassName('reg-required-field')如果你需要支持舊的瀏覽器。

編輯：我添加了在HTML和CSS中自定義.custom-asterisk ，該功能將自動替換標簽文本中的初始'*' 。 我注釋了下面的代碼； 如果您有任何問題，請告訴我。

 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返回一個類似對象的數組，您必須遍歷該數組才能應用到每個元素。 這是因為許多元素具有相同的類。 正確的代碼可能是（使用for循環遍歷該類的每個元素，並使用代碼刪除第一個字符）

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
}

您可以通過將多行合並為一行來縮短代碼

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