1

I'm using the following script to prevent orphaned words (one word on a line by itself) by inserting   between the last two words and I'm applying this to specific elements.

I want to prevent this from applying to tag inside a heading tag:

<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);
    }
});

Actual result:

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

Desired result:

<h3>Common FAQs<i class="fa fa-angle-right fa-angle-right fa-angle-down"></i></h3>
Junky
  • 958
  • 7
  • 17
  • *this works but* - well, it doesn't work as it fails on the first line :0 – freedomn-m Feb 19 '21 at 15:43
  • 1
    [`.html()`](https://api.jquery.com/html/) returns a string – freedomn-m Feb 19 '21 at 15:43
  • Can you provide the desired "after" in your scenario? eg if you remove the `i` then it will..well.. be removed from the output, which may nor may not be what you want. – freedomn-m Feb 19 '21 at 15:45
  • 1
    You have got some mistakes while doing element selection. https://stackoverflow.com/questions/4614120/not-class-selector-in-jquery – msbomrel Feb 19 '21 at 15:45
  • My question is not formed well and I will edit it but I don't want to remove the element, I just dont want to add   to it. – Junky Feb 19 '21 at 15:48
  • Couple of suggestions: wrap the last 2 "words" in a non-breaking-space div, eg https://stackoverflow.com/a/4823765/2181514. Or: split the html into words (see any question asking how to highlight a word) and consider children tags as a "word". – freedomn-m Feb 19 '21 at 17:44
  • Thanks for adding "desired result" - shouldn't that be `

    Common FAQs

    `?     – freedomn-m Feb 19 '21 at 17:45

2 Answers2

2

If you need to remove i tag from h3 element you can just clone that element using .clone and remove children from that tags and only get texts.

Demo Code :

$("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>
Swati
  • 28,069
  • 4
  • 21
  • 41
  • My question is not formed well and I will edit it but I don't want to remove the element, I just dont want to add   to it. – Junky Feb 19 '21 at 15:49
0

I have decided to remove the tag from the element at the source and use it as a pseudo element on the instead. Thanks everyone!

Junky
  • 958
  • 7
  • 17