忽略 HTML 字符串中的元素答案

【问题标题】：Ignore element in HTML string忽略 HTML 字符串中的元素
【发布时间】：2021-05-22 14:43:21
【问题描述】：

我正在使用以下脚本通过在最后两个单词之间插入 &nbsp; 来防止孤立单词（一行中的一个单词），并将其应用于特定元素。

我想阻止它应用于标题标签内的标签：

<h3>Yes to the h3 but <i class="fa"></i> not the i</h3>

// Prevent orphaned words for strings with more than 3 words
$("p:not(.form-row),h1,h2,h3,h4,h5,h6").each(function (i, e) {
    var text = $(e).html().find('i').remove();
    console.log(text);
    text = text.trim().split(' ');
    if (text.length > 3) {
        var lastWord = text.pop();
        text = text.join(' ') + "&nbsp;" + lastWord;
        $(e).html(text);
    }
});

实际结果：

<h3>Common FAQs<i class="fa&nbsp;fa-angle-right fa-angle-right fa-angle-down"></i></h3>

想要的结果：

<h3>Common FAQs<i class="fa fa-angle-right fa-angle-right fa-angle-down"></i></h3>

【问题讨论】：

这可行，但是 - 好吧，它不起作用，因为它在第一行失败：0
.html() 返回一个字符串
您能否在您的场景中提供所需的“之后”？例如，如果您删除i，那么它将..好吧..从输出中删除，这可能也可能不是您想要的。
您在进行元素选择时遇到了一些错误。 stackoverflow.com/questions/4614120/…
我的问题没有很好地形成，我会编辑它，但我不想删除元素，我只是不想添加给它。

标签： javascript jquery

【解决方案1】：

如果您需要从h3 元素中删除i 标签，您可以使用.clone 克隆该元素并从该标签中删除子元素，然后只获取文本。

演示代码：

$("p:not(.form-row),h1,h2,h3,h4,h5,h6").each(function(i, e) {
  var cloned = $(e).find('i') //take i tag ..
  //clone element then remove children from it and get only text
  var text = $(e).clone().children().remove().end().text();
  text = text.trim().split(' ');
  console.log(text)
  if (text.length > 3) {
    var lastWord = text.pop();
    text = text.join(' ') + "&nbsp;" + lastWord;
    $(e).html(text);
    $(e).append(cloned); //append that i tag ...

  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Common FAQs<i class="fa fa-angle-right fa-angle-right fa-angle-down"></i></h3>
<h3>Common FAQs abc ffd<i class="fa fa-angle-right fa-angle-right fa-angle-down"></i></h3>
<h3>Common FAQs abc ffd vlkd.v<i class="fa fa-angle-right fa-angle-right fa-angle-down"></i></h3>

【讨论】：

我的问题没有很好地形成，我会编辑它，但我不想删除元素，我只是不想添加给它。

【解决方案2】：

我决定从源元素中删除标签，并将其用作伪元素。谢谢大家！

【讨论】：