Question

我们假设你有这种格式的HTML（为了便于阅读而换行）：

var html_string = '<p class="text">
  Hello my name is
  <a href="http://example.com">Joe</a>
  and I am an alcoholic
  <img class="emoji" src="http://example.com/beer.png">
  <img class="emoji" src="http://example.com/sad.png">
</p>';

如何删除最后两张表情符号图片？但前提是它们是段落中的最后一个元素。如果emojis之后有文本，那么我不想删除它们。因此，例如，它们不会在以下内容中删除：

var html_string = '<p class="text">
  Hello my name is
  <a href="http://example.com">Joe</a>
  and I am an alcoholic
  <img class="emoji" src="http://example.com/beer.png">
  <img class="emoji" src="http://example.com/sad.png">
  Thanks!
</p>'

文字是可变的，表情符号的数量可能会改变。可能有十个，或者根本没有。

我想过可能将文本拆分成一个数组然后循环遍历它以测试最后一个元素是否是具有该类的图像，但它证明难以检查元素是否是数组中的最后一个。任何建议将不胜感激！

Answer 1

如果不渲染元素，则需要解析文本。这很烦人，因为使用RegEx 解析HTML 基本上是一个坏主意。找到一个开头标签很容易，但结束标签和所有细微差别都不值得付出努力。

如果你想要，你可以尝试这个作为一个基本的例子：

(\<img.+>)

var html_string = `<p class="text">
  Hello my name is
  <a href="http://example.com">Joe</a>
  and I am an alcoholic
  <img class="emoji" src="http://example.com/beer.png">
  <img class="emoji" src="http://example.com/sad.png">
</p>`;

console.log(html_string.replace(/\<img.+>/gi, "")) ;

那么这段代码的问题是什么？

结束标记>将匹配任何结束标记，即使它位于img标记的属性中。为了使它更好，您可以始终使用带有img元素的自闭合标记（大约HTML4）<img />，然后匹配它。哪个将使其更准确，但如果由于某种原因你在属性中有字符串/>，它将会搞砸。

/\<img.+\/>/gi

    var html_string = `<p class="text">
      Hello my name is
      <a href="http://example.com">Joe</a>
      and I am an alcoholic
      <img class="emoji" src="http://example.com/beer.png"/>
      <img class="emoji" src="http://example.com/sad.png"/>
    </p>`;

    console.log(html_string.replace(/\<img.+\/>/gi, "")) ;

前面指出的另一个解决方案是，如果你渲染元素，你可以简单地抓住最后的元素，检查它们是否是图像，并删除它们：

您可以使用lastElementChild并检查它是否是图像元素。

function removeLastImgs(parent) {
  let node;
  while (node = parent.lastElementChild) {
    if (node.tagName === "IMG") node.parentNode.removeChild(node);
    else break;
  }
}

removeLastImgs(document.querySelector("div"));

<div>
  <span> hi</span>
  <img src="#" width="300" height="300" /><img src="#" width="300" height="300" />
</div>

最佳解决方案？如果你能帮助的话，不要把这些元素拉到最初。

只有在最后才能从字符串中删除图像元素

1 个答案: