用jQuery檢測換行符？

Question

有沒有可能讓jQuery / javascript檢測字符串被破壞的位置（為了適應CSS寬度約束），以便在新行的開頭之前插入DOM元素？

Answer 1

我提出了一種方法，但是對於你的目的來說可能有些過分，所以考慮到這一點。

您需要創建元素的克隆，清空原始元素，然后將每個單詞移回原始元素。 如果高度在任何點發生變化，那么在該單詞之前會有一個換行符。 使用$(el).text()可以相當簡單，但如果內部可以有其他標記，則會變得更復雜，而不僅僅是文本。 我試着解釋如何在這個答案框中按節點分解它，但發現在jsFiddle中創建一個jQuery插件更容易。 鏈接到這里： http ： //jsfiddle.net/nathan/qkmse/ （ Gist ）。

它不會很好地處理浮動元素，還有一些其他情況會崩潰。 如果您想要更多選項，或者如果它不適合您的目的，或者如果您不確定如何應用它，我會盡力提供幫助，請告訴我。

Answer 2

這是一種方法。 注意：如果不使用等寬字體，我看不到理想的解決方案。 與字符相等使這項任務更容易。

1. 等寬字符
2. 計算一個字符的大小
3. 計算容器的大小
4. 每行查找字符
5. 查找行將中斷的位置（即空格，破折號等）
6. 獲取所有破壞索引。

看一下相關html的jsfiddle。 我還沒有完成這個功能。 在計算破壞指數時需要進行更多檢查。 現在它正在使用lastIndexOf（''），但這忽略了下一個索引可能是空格或當前。 另外，我不考慮其他破線字符。 然而，這應該是一個很好的起點。

var text = $('#text').text(),                   // "lorem ipsum ... "
    len = text.length,                          // total chars
    width = $('#text').width(),                 // container width
    span = $('<span />').append('a').appendTo('#sandbox'),
    charWidth = span.width(),                  // add single character to span and test width
    charsPerRow = Math.floor(width/charWidth); // total characters that can fit in one row

var breakingIndexes = [], // will contain indexes of all soft-breaks
    gRowStart = 0,        // global row start index
    gRowEnd = charsPerRow;// global row end index

while(gRowEnd < len){
    var rowEnd = text.substring(gRowStart, gRowEnd).lastIndexOf(' '); // add more checks for break conditions here
    breakingIndexes.push(gRowStart + rowEnd); // add breaking index to array
    gRowStart = gRowStart + rowEnd + 1; // next start is the next char
    gRowEnd = gRowStart + charsPerRow;  // global end inxex is start + charsperrow
}

var text2 = $('#text2').text();           // "lorem ipsum ... " now not width bound
var start = 0, newText = '';
for(var i=0; i < breakingIndexes.length; i++){
    newText += text2.substring(start, breakingIndexes[i]) + '<br />'; // add hard breaks
    start = breakingIndexes[i]; // update start
}

$('#text2').html(newText); // output with breaks

http://jsfiddle.net/Y5Ftn/1/

Answer 3

這是我的腳本，它接受文本，然后使每一行成為一個跨度

CSS：

    margin: 0;
        padding: 0;
    }

    .title{
        width: 300px;
        background-color: rgba(233,233,233,0.5);
        line-height: 20px;
    }

    span{
        color: white;
        background-color: red;
        display: inline-block;
        font-size: 30px;
    }

    a{
        text-decoration: none;
        color: black;
    }

HTML

<div class="title">
        <a href="">SOME TEXT LONG TEXT ANDTHISISLONG AND THIS OTHER TEXT</a>
    </div>

JS

$(function(){

        $(".title").find("a").each(function(){

            var $this = $(this);
            var originalText = $this.text();
            $this.empty();

            var sections = [];

            $.each( originalText.split(" "), function(){
                var $span = $("<span>" + this + "</span>");
                $this.append($span);

                var index = $span.position().top;

                if( sections[index] === undefined ){
                    sections[index] = "";
                }

                sections[index] += $span.text() + " ";
            });

            $this.empty();

            for(var i = 0; i< sections.length; i++){
                if( sections[i] !== undefined ){
                    var spanText = $.trim(sections[i]);                     
                    $this.append("<span>" + spanText + "</span>");
                }
            }

        });

    });

你必須包含jQuery。

Answer 4

我認為使用正則表達式檢測更容易 - 在保持效率的同時更少的代碼。

這對我有用：

if ((/(\r\n|\n|\r)/.test($(this).val()))) {
    alert('there are line breaks here')
}

我不確定這是否適用於你的斷字符串，但它適用於使用jQuery檢測行錯誤。

Answer 5

或者，您可以比較文本塊的寬度與其父級的寬度。 如果該塊至少是其父級寬度的98％，那么確定它會中斷

Answer 6

我不知道有任何內置的jQuery javascript函數來做到這一點。 但是，你可以自己做，但如果你有很多文字，它可能會很慢。

從理論上講，您可以確保將高度設置為自動，刪除文本，然后逐字逐句重新插入。 在更改高度時，刪除最后一個單詞，然后插入dom元素。 同樣，如果有大量文本，這將是緩慢的，更好的方法是不更改原始元素，而是在另一個可隱藏的元素中執行，然后在完成時替換原始元素。 這樣，您的用戶就不會看到內容消失，然后一字一句地回來。

另一種方法是使用類似的原則，並從具有高度auto的相同大小的空元素開始，並插入一個新字符和一個空格，直到你得到一個新行。 從那里，你可以使用它作為上述技術的近似，或者你可以盲目地加上每個字符串的長度，直到找到一個新的行，同時考慮到你的dom元素的寬度。 盡管使用等寬字體，這種技術效果更好，這只是作為近似值使用它的地方。

也就是說，有一種方法可以使用畫布來測量文本，但這可能是極端的。 從理論上講，它將創建一個canvas元素，獲取上下文，設置所有字體屬性，然后使用context.measureText()方法。 可以在此處找到它的使用示例。

Answer 7

不確定您的用例究竟是什么，但http://code.google.com/p/hyphenator/可能是您的問題的解決方案，或者如果您深入了解hyphenator.js源代碼，您可能能夠找到代碼你在找。