Поиск "перерывов строк" ​​в textarea, который является текстовым текстом ARABIC text

Ответ 1

Ну, вместо нахождения разрыв строки (что практически невозможно), вы можете направить их в текстовое поле, используя эту функцию:

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

Эта функция получает идентификатор текстового поля и всякий раз, когда есть перенос слов, он нажимает новую строку на текстовое поле. Запустите функцию в форме submit, и вы получите текст с правильными разрывами строки в коде на стороне сервера.

Протестировано для IE, Chrome и Firefox, вы можете сами увидеть здесь: http://jsfiddle.net/yahavbr/pH79a/1/ (Предварительный просмотр показывает новые строки)

Ответ 2

Вот функционально-эквивалентная реализация решения Shadow Wizard, которая намного быстрее, потому что для определения длины каждой строки используется двоичный поиск вместо линейного поиска:

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;

    function testBreak(strTest) {
        oTextarea.value = strTest;
        return oTextarea.scrollWidth > nEmptyWidth;
    }
    function findNextBreakLength(strSource, nLeft, nRight) {
        var nCurrent;
        if(typeof(nLeft) == 'undefined') {
            nLeft = 0;
            nRight = -1;
            nCurrent = 64;
        }
        else {
            if (nRight == -1)
                nCurrent = nLeft * 2;
            else if (nRight - nLeft <= 1)
                return Math.max(2, nRight);
            else
                nCurrent = nLeft + (nRight - nLeft) / 2;
        }
        var strTest = strSource.substr(0, nCurrent);
        var bLonger = testBreak(strTest);
        if(bLonger)
            nRight = nCurrent;
        else
        {
            if(nCurrent >= strSource.length)
                return null;
            nLeft = nCurrent;
        }
        return findNextBreakLength(strSource, nLeft, nRight);
    }

    var i = 0, j;
    var strNewValue = "";
    while (i < strRawValue.length) {
        var breakOffset = findNextBreakLength(strRawValue.substr(i));
        if (breakOffset === null) {
            strNewValue += strRawValue.substr(i);
            break;
        }
        var nLineLength = breakOffset - 1;
        for (j = nLineLength - 1; j >= 0; j--) {
            var curChar = strRawValue.charAt(i + j);
            if (curChar == ' ' || curChar == '-' || curChar == '+') {
                nLineLength = j + 1;
                break;
            }
        }
        strNewValue += strRawValue.substr(i, nLineLength) + "\n";
        i += nLineLength;
    }
    oTextarea.value = strNewValue;
    oTextarea.setAttribute("wrap", "");
}

Обновлена ​​скрипка.

Ответ 3

Я думаю, что самый простой способ сделать это - установить перенос слова вашего текстового поля в html-код на "hard", например:

<textarea id='yourTextArea' wrap='hard'></textarea>

Это означает, что везде, где ваше текстовое поле разбивает строку, вы также вставляете символ \n linebreak charachter в строку при отправке. Если вы обнаружите, что это происходит через вашу строку, это упростит определение места происшествия. Или вы также можете превратить эти символы в теги
html с помощью функции nl2br() PHP.

Ответ 4

По какой-то причине я никогда не был предупрежден, когда этот пост был обновлен... и вчера вечером у меня была эта идея BRILLIANT о том, как определить, где разрыв строки... Я бы перестроил строку и каждый раз проверял ширину, и она работала поэтому я пришел сюда, чтобы поделиться им... и нашел, что я на неделю отстаю

В любом случае 2 важные вещи

• Код, который вы указали, использует ту же самую блестящую идею, которую я имел (хорошо сделал), но когда я ее тестирую, он правильно ломает первую строку, а затем добавляет разрыв строки после каждого символа (тестируется по ссылке jsfiddle.net )

• Я добавил свой код, который использует jquery и использует ширину диапазона, чтобы определить, когда разбить Сначала я попытался использовать ширину div, но div.width() возвращает ширину по умолчанию, а не ширину содержимого.

Я ЗНАЮ, ЧТО НЕ МОЖЕТ РАБОТАТЬ НА ВСЕХ БРАУЗЕРАХ поэтому, прошу вас, любезно, что если кто-нибудь знает способ сделать это надежным или близким к нему, пожалуйста, поделитесь.

Сначала стили необходимо синхронизировать шрифты (все атрибуты) между текстовой областью и div, устанавливать размер и (для IE) удалять любые полосы прокрутки, которые автоматически появляются.

    .inputArea {
      width:200px; 
      height:100px; 
      font-family:Arial; 
      font-size:12px; 
      overflow: auto; 
      border: 1px solid #cccccc;
      padding:0;
      margin:0;
    }
    .divArea {
      font-family:Arial; 
      font-size:12px;
    }
  

Далее я включаю jquery и мои пользовательские функции:

  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
"></script>
  <script type="text/javascript">
  $(document).ready(function() {
     $("#breakUp").click(function () {
       showLineBreaks(); 
       addLineBreaks(); 
     });

     function showLineBreaks() {
       content = $("#textEntered").val();
       //replace line breaks in content with "|" to allow for replacement below
       content = content.replace("\r\n", "
");
       content = content.replace("\r", "
");
       content = content.replace("\n", "
");
       $("#unedited").html(content);
     }

     function addLineBreaks() {
       content = $("#textEntered").val();
       //replace line breaks in content with "|" to allow for replacement below
       content = content.replace("\r\n", "|");
       content = content.replace("\r", "|");
       content = content.replace("\n", "|");
       tempContent = "";
       $("#edited").html("");
       for (var i = 0; i ");
         } else { 
           tempContent = $("#edited").html();
           $("#edited").html(tempContent + content.charAt(i));
           if ($("#edited").width() > 200) {
             $("#edited").html(tempContent + "
" + content.charAt(i));
           }
         }
       }
     }
  });
  <script>

И, наконец, моя тестовая страница html

  Enter text into the textarea below (Set to 200 px width, 100 px height)<br>
  <textarea id="textEntered" class="inputArea"></textarea>
  <br><br>
  The div below will display that text WITHOUT wrapping, BUT replacing all existing line breaks with <br><br>
  <div id="unedited"></div>
  <br>
  The following div will display that text with line breaks ADDED to fit the wrapping<br>
  <div class="divArea"><span id="edited"></span></div>  
  <br>
  <button id="breakUp">Click Here to Convert</button>

Ответ 5

Вот мой пример для вычисления фактического количества строк (после обертки строк) для каждой строки текста в текстовом поле. Обратите внимание, что ширина текста текстовой области немного уменьшается при появлении полосы прокрутки. Это может привести к дальнейшему обертыванию предыдущего содержимого, так что ранее вычисленная высота строки будет неправильной. Следовательно, текстовое поле должно иметь переполнение-стиль-стиль CSS, установленный на "прокрутку", чтобы принудительно отображать полосу прокрутки.

function get_row_wraps(txtArea){                        
    if(wrap=="off"){                                    
        var out=[];                                     
        for(var i=txtArea.split_lines.length; i>=0; --i)
            out[i]=1;                                   
        return out;                                     
    }                                                   

    var its=txtArea.value.split("\n");                        
    var newArea = txtArea.cloneNode(true);              
    newArea.hidden=true;                                
    newArea.style.visibility = "hidden";                
    txtArea.parentNode.appendChild(newArea);            

    // get single row height                            
    newArea.style.height="auto";                        
    newArea.style.overflowY="scroll";                   
    newArea.value="1\n2\n3";                            
    var unit_height=newArea.scrollHeight;               
    newArea.value="1\n2\n3\n4";                         
    var unit_height=newArea.scrollHeight-unit_height;   
    newArea.style.height=Math.round(unit_height*1.5)+"px"; // so that the scrollbar does not vanish
    newArea.value="";                                   

    // obtain row height for every line of text         
    function comp_Nrow(scroll_height){                  
        return Math.floor(scroll_height/unit_height);   
    }                                                   
    function calc_rows(txt){                            
        newArea.value+=txt;                             
        return comp_Nrow(newArea.scrollHeight);         
    }                                                   
    var out=[];                                         
    for(var i=0; i<its.length; i++)                     
        out.push(calc_rows(i==0?its[i]:("\n"+its[i]))); 
    txtArea.parentNode.removeChild(newArea);            
    for(var i=out.length-1; i>0; i--)                   
        out[i]-=out[i-1];                               
//  alert(out);                                         
    return out;                                         
}                                                       

Вышеуказанная функция возвращает фактическое количество обернутых строк для каждой строки текста (разделенной "\n" ) в текстовом поле. Вычисление точно по крайней мере для Chrome и Firefox.

Ответ 6

Код проверен на "Crome", "Firefox" и "IE". Получение строк и кареток возвращает компонент "textArea" (клиентская сторона с javascript).

WORKS WELL!. Я хотел бы поделиться им с вами.

важно включить стиль

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--//definimos un estilo--%>
 <STYLE type="text/css">
    #CadTemp 
    {
        font-family: "Arial", serif; 
        font-size: 12pt; 
        visibility: hidden;
        position: absolute;
        top: -100;
        left: 0px;
    }
 </STYLE>

    <script type="text/javascript">
        function mostrar() {
            return 'ancho cadena: ' + document.getElementById('myTextarea').value.visualLength() + '  \n' + 'ancho textarea: ' + (document.getElementById('myTextarea').scrollWidth -4);
        }


        //sustituimos el espacio en blanco por el punto, tienen exactamente el mismo tamaño en 'pixeles'
        function reemplazarEspacios(texto) {
            var devolver = "";
            for (var i = 0; i < texto.length; i++) {
                if (texto.charAt(i) == ' ') {
                    devolver += '.'
                } else {
                    devolver += texto.charAt(i);
                }
            }
            return devolver;
        }

        // Calcula los pixeles de ancho que ocupa un texto (la cadena debe tener el mismo tamaño y tipo de fuente)
        String.prototype.visualLength = function () {
            var ruler = document.getElementById("CadTemp");            
            ruler.innerHTML = reemplazarEspacios(this)
            return ruler.offsetWidth;
        }

        //quitar espacios a la derecha de la cadena
        String.prototype.rtrim = function() {return this.replace(/\s+$/,"");}

        //devuelve el ultimo espacio de la cadena (que no sea espacio final)
        function IndEspacio(cadena) {
            //quito los espacios al final
            var cadenaTemp = cadena.rtrim();
            return cadenaTemp.lastIndexOf(' ');
        }

        //insertar un salto de linea
        function AplicarSaltosLinea(ID_elemento) {
           //guardo el elemento web en una variable
           var TextArea = document.getElementById(ID_elemento);
           var cadenaTexto = "";
           var Cadenafinal = "";
           var buffer = "";

           //recorremos toda la cadena
           for (var i = 0; i < TextArea.value.length; i++) {
                //guardamos el caracater en la cadena
                cadenaTexto += TextArea.value.charAt(i);

                //si hay un retorno de carro, antes de llegar al final del textArea
                if (TextArea.value.charAt(i) == '\n') {
                    Cadenafinal += cadenaTexto.substr(0, cadenaTexto.lastIndexOf('\n') + 1) ;
                    cadenaTexto = "";
                }

                //si el ancho actual de la cadena  es mayor o igual que el ancho del textarea (medida pixeles)
                if (cadenaTexto.visualLength() > TextArea.scrollWidth - 4) {
                    //recuperamos el ultimo espacio en blanco antes de la ultima letra o palabra
                    var indiceEspacio = IndEspacio(cadenaTexto)

                    buffer = "";
                    //ultimo espacio en blanco detectado, metemos el trozo de palabra desde el ultimo espacio
                    if (indiceEspacio >= 0) {
                        for (var j = indiceEspacio + 1; j <= i; j++)
                            buffer += cadenaTexto.charAt(j);
                        indiceEspacio = -1;
                    } else {
                        buffer += TextArea.value.charAt(i);
                    }
                    //coloca la cadena 
                    Cadenafinal += cadenaTexto.substr(0, cadenaTexto.length - buffer.length) + "\n";
                    cadenaTexto = buffer;
                }
            }

            Cadenafinal += cadenaTexto;

            document.getElementById("pnlPreview").innerHTML = Cadenafinal.replace(new RegExp("\\n", "g"), "<br />");
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="CadTemp">hola</span>
    </div>
    <br />
    <div>
        <textarea cols="20" rows="5" id="myTextarea" wrap="hard" 
            style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt"></textarea>
    </div>
    <div id="pnlPreview"></div>
    <div>
        <button type="button" onclick="AplicarSaltosLinea('myTextarea');">Apply Line Breaks</button>
        <button type="button" onclick="alert( document.getElementById('myTextarea').value )">mensaje</button>
        <button type="button" onclick="alert( mostrar())">calcular Ancho Pixel</button>
        <br />
        </div>
    </form>
</body>
</html>

Ответ 7

Я не хочу копать старые посты, но это тот, где я вышел после поиска в течение некоторого времени. Решение @Shadow Wizard у меня не сработало, потому что оно оставляло место за каждым предложением, поэтому я решил внести некоторые коррективы. Вместо того, чтобы делать это за персонажа, я делаю это за слово. Это приводит к более простым проверкам и также в 10 раз быстрее, проверяя с полным Lorem Ipsum (~ 600 мс против 6 полных секунд на скрипке, 120 мс без скрипки).

Я создал (задокументированную) скрипку. Я собираюсь посмотреть, смогу ли я еще немного оптимизировать его.

function applyLineBreaks = function(strTextAreaId) {

    // Get txtarea
    var oTextarea = document.getElementById(strTextAreaId);

    // Disable textarea wrap
    oTextarea.setAttribute("wrap", "off");

    // Split the characters into an array
    var aWords = oTextarea.value.split(' ');

    // Empty the textarea
    oTextarea.value = "";

    // Get textarea scrollwidth
    var nEmptyWidth = oTextarea.scrollWidth;

    // Start looping over the words
    for(var i = 0; i < aWords.length; i++)
    {
        if(i > 1000)
        {
            break;
        }
        var curWord = aWords[i] + ' ';

        // Add character to textarea
        oTextarea.value += curWord;

        // console.log(oTextarea.scrollWidth, nEmptyWidth);
        if(oTextarea.scrollWidth > nEmptyWidth)
        {
            let oldVal      = oTextarea.value;
            let newVal      = oldVal.substring(0, (oldVal.length - (curWord.length + 1))) + "\n" + curWord;
            oTextarea.value = newVal;
        }
    }
    oTextarea.setAttribute("wrap", "");

    return oTextarea.value;
};