从标签上切一个星号

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