В браузере как определить, какой вид разрывов строк подходит для ОС? - PullRequest
0 голосов
/ 27 мая 2011

\n или \r\n (или даже \r) другими словами.Я стараюсь не вынюхивать строку агента пользователя.

Первая попытка:

var osLineBreak = (function () {
  var p = document.createElement('p');
  p.innerHTML = '<br>';
  return p.innerText;
}());

К сожалению, Firefox не предоставляет innerText, и textContent возвращает пустую строку в этом случае.

Вторая попытка:

var osLineBreak = (function () {
  var
    lineBreak,
    body = document.body,
    range = document.createRange(),
    selection = window.getSelection(),
    p = document.createElement('p');

  // we cannot make a selection unless `p` is in the DOM,
  // so ensure that it is not visible when we insert it
  p.style.position = 'absolute';
  p.style.left = '-9999px';
  // Firefox returns the empty string if `innerHTML` is
  // set to "<br>", so include leading and trailing
  // characters
  p.innerHTML = '%<br>%';
  body.appendChild(p);
  // wrap `p` in `range`
  range.selectNodeContents(p);
  // make a selection from `range`
  selection.addRange(range);
  // see how the line break is treated in the selection
  // (provide a sane fallback in case we get the empty string)
  lineBreak = /%(.*)%/.exec(selection.toString())[1] || '\n';
  // revert our fiddlings
  selection.removeAllRanges();
  body.removeChild(p);
  return lineBreak;
}());

Есть ли менее запутанная техника, которую я пропустил?

Ответы [ 3 ]

4 голосов
/ 26 июля 2011

Обновление в 2015 году : Как видно из приведенного ниже, даже в 2011 году Chrome и Firefox использовали \n на всех платформах.Opera и IE использовали \r\n в Windows.С тех пор Opera переключилась на WebKit, такой как Chrome, и поэтому предположительно использует \n.IE8 был последним IE, который использовал \r\n в текстовых областях;начиная с IE9, IE также использует только \n.Не тестировали мобильные браузеры.


Пришло довольно поздно на вечеринку, но если вы действительно хотите узнать, какой символ разделителя строк использует браузер в textarea s итакое (которое может варьироваться в браузере даже на одной и той же ОС ), вы можете узнать с помощью хитрого трюка:

function getLineBreakSequence() {
    var div, ta, text;

    div = document.createElement("div");
    div.innerHTML = "<textarea>one\ntwo</textarea>";
    ta = div.firstChild;
    text = ta.value;
    return text.indexOf("\r") >= 0 ? "\r\n" : "\n";
}

Это работает, потому что браузеры, которые используют \r\n конвертировать \n на лету при разборе строки HTML.Вот живая копия , которую вы можете попробовать сами с помощью своих любимых браузеров.В IE и Opera (даже Opera работает на * nix), вы обнаружите, что это \r\n.На Chrome, Firefox и Safari (даже на Windows) вы обнаружите, что это \n.

Тем не менее, мой опыт показывает, что вставка \n (например, при назначении на value)свойство, в отличие от приведенной выше строки HTML) работает даже в браузерах, которые обычно используют \r\n.Но это не значит, что нет крайних случаев, и я должен признать, что я не делаю это (вставка разрывов строк в textarea s) с какой-либо регулярностью, поэтому, если есть проблемы, и я действительно должен бытьиспользуя \r\n в некоторых браузерах, возможно, я просто не нашел их.

1 голос
/ 27 мая 2011

На веб-странице вкус перевода строки не имеет значения в ОС. Разрывы строк не учитываются при отображении на веб-странице. Для этого вам необходим элемент BR или блочный элемент, и эти являются кроссплатформенными и поддерживаются во всех браузерах.

См. на этой странице для упрощенного объяснения.

ОБНОВЛЕНИЕ:

Так что нужны ли для форматирования текстовые поля, а там разрывы строк, важны. Извините за недоразумение, что мой английский немного хромает.

Начните с определения ОС вашего пользователя, с чем-то похожим на это:

 var OSName="Unknown OS";

 if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
 if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
 if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
 if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

Для этого существует много разных реализаций , но я сохранил его очень простым, и он все равно будет работать так же хорошо, как и 150-строчные версии.

Затем установите окончания строк в переменной, в зависимости от возвращаемой ОС, и постройте свою строку из этого. Т.е.:

if (navigator.appVersion.indexOf("Win")!=-1){
    OSName="Windows";
    linebreak = "\r\n";
} // etc ...
0 голосов
/ 27 мая 2011

, если вам действительно нужен элемент break по какой-то причине, почему бы вам не просто:

var br=document.createElement('br');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...