javascript - 在 JavaScript 中如何抓取文本元素、删除元素并组织为 UL

Question

首先，也是最重要的，我是 JavaScript 的业余爱好者，所以如果这很容易，我表示歉意。

我在页面上呈现一条闪现消息，但无法正确处理，因此我尝试通过 JavaScript 更改它。页面最终呈现如下:

<div class="alert-error">
 <a class="close" data-dismiss="alert">x</a>
 "
  Row 1: Name can't be blank, City can't be blank, State can't be blank; Row 2: Address can't be blank, Email can't be blank
 "
</div>

我想做的是抓取文本，而不是链接，然后更改为无序列表或只是换行。

我尝试过以下变体:

var alpha = document.getElementsByClassName('alert-error')[0].innerText;
alpha.replace(/;/g, '\n');
alpha.split(';').join('\n');
alpha.replace(/;/g, '<br>');

它在控制台中有效，但当我尝试渲染页面时无效。我也尝试过:

function newLine(){
 var alpha = document.querySelectorAll('alert-error');
 alpha.forEach(item => {
  item.innerHTML = item.innerText || item.textContent
  item.innerHTML.replace(/;/g, '\n');
 });
};
window.onload = newLine;

这显然没有任何作用。我也被周围链接中的 x 所困扰。

最终我想看到的是字面意思:

• 第 1 行:名称不能为空、城市不能为空、州不能为空
• 第 2 行:地址不能为空，电子邮件不能为空

所需的 HTML:

<div class="alert-error">
 <a class="close" data-dismiss="alert">x</a>
 <ul>
  <li>Row 1:Name can't be blank, City can't be blank, State can't be blank</li>
  <li>Row 2:Address can't be blank, Email can't be blank</li>
 </ul>
</div>

那么如何从 div 中获取文本元素，去掉 a 标签，然后将文本元素从分号转换为换行/无序列表？

已更新答案。对使用 while 循环做了一个小改动:

  function updateRow() {
    var errorLocation = document.querySelectorAll('.alert-error');
    var text = errorLocation[0].innerText.substr(1);
    text = text.substr(1, text.length - 1);
    var closer = document.createElement('a')
    closer.className = 'close'
    closer.setAttribute('data-dismiss', 'alert');
    closer.innerText = 'x';

    var textData = text.split(';')
    var ul = document.createElement('ul')
    var i = 0;
    while (i < textData.length) {
      var li = document.createElement('li')
      li.innerText = textData[i];
      ul.appendChild(li);
      i++;
    }
    errorLocation[0].innerHTML = ''
    errorLocation[0].appendChild(closer);
    errorLocation[0].appendChild(ul);
  };
  updateRow();

.alert-error {
background-color: purple;
color: white;
}

<div class="alert alert-error">
      <a class="close" data-dismiss="alert">×</a>
      Row 1: Last name can't be blank, Address can't be blank, City can't be blank, State can't be blank, Zip can't be blank, Phone can't be blank, Email Invalid due to bill being an incorrect email, and Hotel must be selected; Row 2: Last name can't be blank, Address can't be blank, City can't be blank, State can't be blank, Zip can't be blank, Phone can't be blank, Email Invalid due to frank@no being an incorrect email, Check in cannot be before check out, and Hotel must be selected; Row 3: Last name can't be blank, Address can't be blank, City can't be blank, State can't be blank, Zip can't be blank, and Phone can't be blank
  </div>

Answer 1

尝试利用有限的可用信息发挥最佳水平。我为你制作了一把 fiddle 。 https://jsfiddle.net/djqp8b6f/

请告诉我它是否适合您的需求。该代码解析 div 的文本。我们按 ; 进行拆分，然后执行 for 循环，在每次迭代中附加 li 项。

function applyFix(){
 var alpha = document.querySelectorAll('.alert-error');
 var text = alpha[0].innerText.substr(4); // removing extra " at start
 text = text.substr(0, text.length - 1); // remove extra " at end
 var aLink = document.createElement('a') // recreating the a-link
 aLink.className='close'
 aLink.setAttribute('data-dismiss', 'alert');
 aLink.innerText = 'x';

 var textData = text.split(';') // performs the conversion of text to li(s)
 var ul = document.createElement('ul')
 for(var i=0;i<textData.length;i++) {
    var li = document.createElement('li')
  li.innerText = textData[i];
  ul.appendChild(li);
 }
 alpha[0].innerHTML = ''
 alpha[0].appendChild(aLink);
 alpha[0].appendChild(ul);
};