Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Длина строки в многострочном тексте (https://javascript.ru/forum/dom-window/23561-dlina-stroki-v-mnogostrochnom-tekste.html)

Rembrant 28.11.2011 02:10

Длина строки в многострочном тексте
 
Здравствуйте, уважаемые. Подскажите, есть ли решение у такой задачи.
Есть div или textarea, в который вводится произвольный текст на несколько сточек. Текст выравнивается по левому краю, поэтому длина каждой строки (от первой до последней буквы) разная. Необходимо посчитать в пикселях или в символах, сколько занимает та или иная строка. Или хотя бы выделить её из текста средствами JS. У меня пока нет вариантов. Такое вообще можно сделать?

melky 28.11.2011 09:39

я неуверен только насчёт количества пикселей и ньюлайна (\n в split) в windows или mac. или там в js так можно?

<textarea>
Да это же
мистер
оливье!!!!!!!!!  
</textarea>

<script>
var area = document.querySelector('textarea');

var lines = area.value.split("\n");

var biggest;

lines.forEach(function(line){
    if(!biggest||line.length>biggest.length){
        biggest = line;
    }
});

var fontSize = parseInt(getComputedStyle(area,null).fontSize);

alert("Самая длинная строка : "+biggest+'\nКол-во символов : '+biggest.length+'\nКол-во пикселей : '+(fontSize*biggest.length));
</script>

Pavel M. 28.11.2011 10:44

осторожнее с getComputedStyle в IE<9 не работает
http://beta.javascript.ru/tutorial/s...tcomputedstyle

B~Vladi 28.11.2011 19:01

Не не не, Девид Блейн. Это же обман:
fontSize * biggest.length


Длину строки в пикселях не так нужно узнавать.

melky 29.11.2011 09:06

Цитата:

Сообщение от Pavel M. (Сообщение 139445)
осторожнее с getComputedStyle в IE<9 не работает
http://beta.javascript.ru/tutorial/s...tcomputedstyle

я знаю. я не задавался целью сразу писать кроссбраузерный код.

Цитата:

Сообщение от B~Vladi (Сообщение 139529)
Не не не, Девид Блейн. Это же обман:
fontSize * biggest.length


Длину строки в пикселях не так нужно узнавать.

говорю же, неуверен :) как бы вы это сделали:?

Pavel M. 29.11.2011 10:24

Цитата:

Сообщение от melky
говорю же, неуверен как бы вы это сделали:?

была тема про расширяющийся input - там предлагали разные способы как узнать длину строки текста http://javascript.ru/forum/dom-windo...shirinojj.html

B~Vladi 29.11.2011 10:33

Цитата:

Сообщение от melky
как бы вы это сделали:?

Да тут всё просто:
1. Создаем div с размерами, равными textarea.
2. Берём из textarea содержимое, делим на строки и каждую строку оборачиваем в span.
3. Кладем span-ы в div, div в body, скрываем.
4. Вычисляем offsetWidth для span-ов
5. Удаляем div.

B~Vladi 29.11.2011 10:38

Ах, да. Разделять нужно так:
value.split(/\r|\n/g);

melky 29.11.2011 13:56

в той теме умножали на числа от 10 до 12 - размеры шрифта.

но не вы, Pavel M. :)

B~Vladi, спасибо. так яснее.


Часовой пояс GMT +3, время: 06:29.