Detecting Line-Breaks with Jquery

detecting line-breaks with jQuery?

I came up with an approach, but it might be overkill for your purposes, so take this into account.

You need to create a clone of the element, empty the original, then move each word back into the original element. If the height changes at any point, there's a line-break before that word. This would be fairly simple to do using $(el).text(), but it gets more complicated if there can be other tags inside, not just text. I tried explaining how to break it down by node in this answer box, but found it easier just to create a jQuery plugin in a jsFiddle. Link here: http://jsfiddle.net/nathan/qkmse/ (Gist).

It won't handle floated elements all that well, and there are a few other situations where it'll fall over. Let me know if you'd like more options, or if it doesn't quite work for your purposes, or if you're not sure how to apply it and I'll try to help.

JQuery detect newline in a string

Take a look at nl2br on php.js which seems exactly what you're looking for. Basically, it's:

function nl2br (str, is_xhtml) {
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

Demo : http://devilmaycode.altervista.org/jquery-convert-line-breaks-to-br-nl2br-equivalent/

How to use jQuery to check if element breaks to the next line?

Comparing position().top of both elements on resize or load could trigger a function containing a CSS modification.

If the absolute value of the difference between position().top of the left and right elements is greater than a certain amount, and both elements are set to align to the top of their parent element, then it would theoretically mean it's probably a line break.

See jsfiddle example here: https://jsfiddle.net/aprtLumf/2/

jQuery position() documentation: https://api.jquery.com/position/

detect natural line breaks javascript

Finally I found this script on the internet:

function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
    oTextarea.setAttribute("wrap", "off");
}
else {
    oTextarea.setAttribute("wrap", "off");
    var newArea = oTextarea.cloneNode(true);
    newArea.value = oTextarea.value;
    oTextarea.parentNode.replaceChild(newArea, oTextarea);
    oTextarea = newArea;
}

var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
    var curChar = strRawValue.charAt(i);
    if (curChar == ' ' || curChar == '-' || curChar == '+')
        nLastWrappingIndex = i;
    oTextarea.value += curChar;
    if (oTextarea.scrollWidth > nEmptyWidth) {
        var buffer = "";
        if (nLastWrappingIndex >= 0) {
            for (var j = nLastWrappingIndex + 1; j < i; j++)
                buffer += strRawValue.charAt(j);
            nLastWrappingIndex = -1;
        }
        buffer += curChar;
        oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
        oTextarea.value += "\n" + buffer;
    }
}
oTextarea.setAttribute("wrap", "");
document.getElementById("pnlPreview").innerHTML = oTextarea.value.replace(new RegExp("\\n", "g"), "<br />");

}

Which is working fine.

jQuery onInput recognize line break

Change your code from this:

$('#text').on('input',function(){
    $('#previewText').html($('#text').val());
});

to this:

$('#text').on("input", function () {
        $('#previewText').html($(this).val().replace(/\n/g, "<br/>"));
});

Here is the JSFiddle demo

What the modified code does is that it replaces the line breaks character "\n" to "<br/>" which is the HTML version of standard line break.

---

Related Topics