如何在<li>和<div>之后删除文本

Question

我想删除<li>中的"Text"。

这是我的尝试：

​

window.onload = function() {
  var str = document.getElementsByClassName("slide-2")[0].innerHTML; 
  var res = str.replace("Text", "Hello");
  document.getElementsByClassName("slide-2")[0].innerHTML = res;
}

<ul class="box1">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

<ul class="box2">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

​

它不起作用，因为"data-rel"与我要删除的文本具有相同的值。

我不能更改或删除"data-rel"中的值。

Answer 1

您可以使用nodeValue设置节点的文本内容，而不会中断其他子元素。

​

const node = document.querySelector("li.slide-2").childNodes[1];
node.nodeValue = node.nodeValue.replace(/Text/g, "Hello");

const dataset = document.querySelector("div.slide-2").dataset;
console.log("is the `data-rel` attribute still `Text`?", dataset);

<ul class="box1">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

<ul class="box2">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

​

或者，如果要替换多个匹配项：

​

for (const node of [...document.querySelectorAll("li.slide-2")]) {
  const child = node.childNodes[node.childNodes.length-1];
  child.nodeValue = child.nodeValue.replace(/Text/g, "Hello");
}

<ul class="box1">
    <li class="slide-1">001</li>
    <li class="slide-2">
      <div data-rel="Text" class="slide-2">
        this Text won't be touched... 
      </div>
      Text and some more Text text.
    </li>
    <li class="slide-3">003</li>
</ul>

<ul class="box2">
    <li class="slide-1">001</li>
    <li class="slide-2">
      <div data-rel="Text" class="slide-2">
        this Text also won't be touched... 
      </div>
      Text
    </li>
    <li class="slide-3">003</li>
</ul>

​

如果您想要强制使用单词边界而忽略Textual，请考虑使用/\bText\b/g。

对子<div>和父<li>应用slide-2类名可能是一个潜在的反模式。

Answer 2

​

var str = document.getElementsByClassName("slide-2")[0].innerHTML; 
      var res = str.replace(/Text/gi, "Hello");
      document.getElementsByClassName("slide-2")[0].innerHTML = res;

<ul class="box1">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

<ul class="box2">
    <li class="slide-1">001</li>
    <li class="slide-2"><div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
    <li class="slide-3">003</li>
</ul>

​

Answer 3

选择childNodes，循环遍历并查找包含要匹配的文本的文本节点(3)。

​

window.onload = function() {
  var lis = document.getElementsByClassName("slide-2");
  Array.from(lis).forEach(function(li) {
    var textNode = Array.from(li.childNodes).find(function(node) {
      // return node.nodeType == 3;
      return node.nodeType == 3 && node.nodeValue === "Text";
    })
    // if (textNode) textNode.nodeValue = "";
    if (textNode) textNode.remove();
  })
}

<ul class="box1">
  <li class="slide-1">001</li>
  <li class="slide-2">
    <div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
  <li class="slide-3">003</li>
</ul>

<ul class="box2">
  <li class="slide-1">001</li>
  <li class="slide-2">
    <div data-rel="Text" class="slide-2"><img src=".."></div>Text</li>
  <li class="slide-3">003</li>
</ul>

​