预防孤儿

时间:2016-12-13 13:39:54

标签: javascript jquery html html5

我试图通过在段落和标题中的最后两个单词之间添加一个非中断空格来防止单个单词孤儿。我使用的脚本也有删除链接的副作用。



$("p,h1,h2,h3,h4,h5,h6").each(function() {
    var wordArray = $(this).text().split(" ");
    var finalTitle = "";
    for (i=0;i<=wordArray.length-1;i++) {
        finalTitle += wordArray[i];
        if (i == (wordArray.length-2)) {
            finalTitle += "&nbsp;";
        } else { 
            finalTitle += " ";
        }
    }
    $(this).html(finalTitle);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <a href="test.php">It has survived</a> not only five centuries, but also the leap into electronic typesetting.</p>
<p> only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.</p>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

尝试使用html()代替text()

$("p,h1,h2,h3,h4,h5,h6").each(function(i,e) {
  var text = $(e).html();
  text = text.split(' ');
  var lastWord = text.pop();
  text = text.join(' ') + "&nbsp;" + lastWord;
  $(e).html(text);
});

fiddle

顺便说一句,有一个不起作用的角落情况,当要取消整理的元素的最后一个单词在<a>内或任何其他带有属性的标记时,像:

<p>Lorem ipsum dolor sit <a href="">amet.</a></p>

答案 1 :(得分:2)

问题是你正在使用.text()获取元素及其后代的组合文本,而不是decedent元素本身,所以当你用自己生成的东西替换HTML时这个,它不包括它们。

使用.contents(),获取最后一个text节点,并将其替换为text节点,&nbsp;元素和{{1} }节点代表最后一个单词。

答案 2 :(得分:0)

    function noMoreLonelyWords(selector, numWords){

      // Get array of all the selected elements
      var elems = document.querySelectorAll(selector);
      var i;
      for(i = 0; i < elems.length; ++i){

        // Split the text content of each element into an array
        var textArray = elems[i].innerText.split(" ");

        // Remove the last n words and join them with a none breaking space
        var lastWords = textArray.splice(-numWords, numWords).join("&nbsp;");

        // Join it all back together and replace the existing
        // text with the new text
        var textMinusLastWords = textArray.join(" ");
        elems[i].innerHTML = textMinusLastWords + " " +  lastWords;
      }
    }

    // Goodbye lonely words
    noMoreLonelyWords("p", 2);
<div class="onePar">
  <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say
    something like this:
  </p>
</div>

<div class="twoPar">
  <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say
    something like this:
  </p>
</div>