javascript - 从标签上切下星号

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>