在浏览器中，如何确定换行符是否适合操作系统？ [英] In the browser, how does one determine which flavour of line breaks is appropriate to the OS?

问题描述

\\\
或 \r\\\
（甚至 \ 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'）; 
 
 //是在DOM中，
 //，所以确保它是不可见的，当我们插入它
 p.style.position ='absolute'; 
 p.style.left ='-9999px' ; 
 //如果`innerHTML`是
 //设置为< br>，则Firefox返回空字符串，因此包括前导和尾随
 //字符
 p。 innerHTML ='％< br>％'; 
 body.appendChild（p）; 
 //在范围内包装`p` 
 range.selectNodeContents（p）; 
 //从range中进行选择
 selection.addRange（range）; 
 //看看在选择中如何处理换行符
 //（提供一个合理的回退情况我们得到空字符串）
 lineBreak = /%(.*)%/.exec(selection.toString())[1] || '\\\
'; 
 //还原我们的中文
 selection.removeAllRanges（）; 
 body.removeChild（p）; 
 return lineBreak; 
}（））; 
  

有没有我忽略的复杂技术？

< ：从下面可以看出，甚至在2011年，Chrome和Firefox都使用 \ n 。 Opera和IE在Windows上使用 \r\\\
。从那时起，Opera已经切换到WebKit，如Chrome，因此可能使用 \\\
。 IE8是最后一个在textareas中使用 \r\\\
的I​​E;从IE9开始，IE也使用 \\\
。尚未测试移动浏览器。

---

稍晚到派对，但如果真的想知道浏览器在 textarea 等中使用什么行分隔字符（在浏览器中可以在同一个操作系统上变化）你可以用一个鬼祟的技巧找出：

  function getLineBreakSequence（）{
 var div，ta，text; 
 
 div = document.createElement（div）; 
 div.innerHTML =< textarea> one\\\
two< / textarea>; 
 ta = div.firstChild; 
 text = ta.value; 
 return text.indexOf（\r）> = 0？ \r\\\
：\\\
; 
} 
  

这是因为浏览器使用 \r在解析HTML字符串时，\ n 转换 \\\
这里有一个直播拷贝，您可以使用自己喜欢的浏览器尝试自己。在IE和Opera（甚至Opera在* nix上运行），你会发现它的 \r\\\
。在Chrome，Firefox和Safari上（即使在Windows上运行），您会发现它 \\\
。

也就是说，我的经验是插入 \\\
（例如，当分配给 value 到HTML字符串位上面）甚至在通常使用 \r\\\
的浏览器上工作。但这并不意味着没有边缘情况，我必须承认我不这样做（在 textarea 中插入换行符）具有任何规则性，所以如果有问题，我真的应该使用 \r\\\
在一些浏览器，我可能只是没有找到他们。

\n or \r\n (or even \r) in other words. I'm keen to avoid sniffing the user agent string.

First attempt:

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

Unfortunately Firefox does not provide innerText, and textContent returns the empty string in this case.

Second attempt:

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;
}());

Is there a less convoluted technique that I've overlooked?

解决方案

Update in 2015: As you can see from the below, even back in 2011 Chrome and Firefox were using \n on all platforms. Opera and IE used \r\n on Windows. Since then, Opera has switched to WebKit like Chrome, and so presumably uses \n. IE8 was the last IE that used \r\n in textareas; from IE9 onward, IE also uses just \n. Haven't tested mobile browsers.

---

Coming rather late to the party, but if you really want to know what line separator character the browser is using in textareas and such (which can vary within browser even on the same OS), you can find out with a sneaky trick:

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

This works because the browsers that use \r\n convert the \n on-the-fly when parsing the HTML string. Here's a live running copy you can try for yourself with your favorite browser(s). In IE and Opera (even Opera running on *nix), you'll find it's \r\n. On Chrome, Firefox, and Safari (even running on Windows), you'll find it's \n.

That said, my experience is that inserting \n (e.g., when assigning to the value property, as opposed to the HTML string bit above) works even on browsers that would normally use \r\n. But that doesn't mean there aren't edge cases, and I have to admit I don't do that (insert line breaks in textareas) with any kind of regularity, so if there are issues and I really should be using \r\n on some browsers, I may just have not found them.

这篇关于在浏览器中，如何确定换行符是否适合操作系统？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！