jQuery text（）函数在IE中丢失换行符

这是jQuery论坛上一个非常讨论的问题，但我无法找到适合我情况的解决方案。

我有一个无序列表，其中包含一些文本元素…用户可以通过jQuery创建新的列表项，这些项目将保存到SQL数据库中。 他们还可以编辑现有的列表项。 此外，由于每个列表项中的文本可能会很长，因此可以选择“隐藏”每个列表项，以便显示字符串的截断版本。 这是由一个自定义的jQuery插件处理的，该插件截断了超过一定长度的列表项…这里是truncate插件格式化后每个列表项的样子：

 
 This is the text that shows when this element is truncated ... This is the text that will be hidden if the user clicks on the 'hide' button 
 
 
 Hide note 
 
 Edit | Delete 
 
  

我遇到的问题是用户单击“编辑”并使用“注释”类获取div的内容并将其分配给文本区域。 然后，用户可以编辑文本并保存。 我使用以下脚本来获取div的内容并将其分配给textarea：

 $('.edit_note a').click(function(event){ // Get the parent li of the 'edit' link that was clicked var parentLi = $(this).closest('li'); // fade out the li that's being edited parentLi.fadeOut('fast'); // remove the '...' that shows when the note is truncated parentLi.find('.truncate_ellipsis').remove(); // find the 'note' div within the li that's being edited var currentNote = parentLi.find('.note'); // grab the id of this note... used when saving to the DB var noteId = $(this).attr('id').substr(10); // Set the current note id variable and editing status currentNoteId = noteId; currentNoteStatus = 'edit'; //add the note ID as a hidden field to the text editor form $('input[name$="note_id"]').val(noteId); // grab the text from this note and add it to the text area // (textarea id is 'notes_content') $('#notes_content').val($.trim(currentNote.text()); // this is the text area // fade in the text area so the user can edit $('div.notes_textarea').fadeIn(); }); 

一旦保存，我就会使用我在网上找到的function将换行符转换为BR，然后将文本区域的内容分配回相应列表项中的“note”div：

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

这一切在firefox / chrome / opera / safari中运行良好…但是，IE通过jQuery text（）函数抓取文本时摆脱了换行符。 这个在jQuery文档的本页评论中讨论：

http://api.jquery.com/text/

有些人通过克隆源元素，将其包装在’pre’标签中，然后将其内容放入文本区域，取得了成功。 这适用于换行符，但也带来了额外的空格，标签等等，看起来有点混乱。 一个更好的解决方案似乎是使用html（）jQuery函数来获取文本，然后将br替换为换行符，并删除任何其他html格式。

我是Javascript的新手，但是我对正则表达式很垃圾，所以我不知道如何做到这一点，而且我已经没时间了！ 我需要一个正则表达式，或者只需要一些字符串格式化帮助来执行以下操作：

• 从字符串中删除所有span标签而不删除span的内容（我的truncate函数添加了一个带有“truncate_more”类的span …请参阅上面的html代码）

• 删除br并将其替换为可在textarea元素中正确显示的换行符，并在浏览器中保持一致

或..如果有人知道这个IE / textarea / linebreak问题的更好的解决方法，我真的很感激白痴指导:)

关于什么可能是一个简单的解决方案的相当多的信息，但我想我会尽力解释这种情况！ 任何帮助将非常感谢….

编辑 ：’TheJuice下面的答案适用于br / IE换行问题（谢谢！），但我需要执行类似的正则表达式来摆脱跨度，因为它们只封装了一些文本。 我尝试了以下，这似乎在Firefox中运行良好，但在IE中，跨度仍然存在：

  var withBRs = currentNote.html(); var textWithBreaks = withBRs.replace(/\
/gi,'\r'); textWithBreaks = textWithBreaks.replace(/\/g, ''); 

另一个编辑 ：’TheJuice’也解决了这个问题…忽略我可怕的正则表达式，如果你发现自己处于同样的境地，就去做他说的话！ 感谢所有提出建议的人……

Answer 1

这是一个更简单的解决方案，可以根据使用
或

标记将任何HTML转换为带有换行符的纯文本。

 function htmlDecodeWithLineBreaks(html) { var breakToken = '_______break_______', lineBreakedHtml = html.replace(//gi, breakToken).replace(/(.*?)<\/p>/gi, breakToken + '$1' + breakToken); return $('
').html(lineBreakedHtml).text().replace(new RegExp(breakToken, 'g'), '\n'); } 

例如，调用以下方法：

 htmlDecodeWithLineBreaks('line 1
line & 2
' + 'line > 3
paragraph 1
line 4') 

收益：

 line 1 line & 2 line > 3 paragraph 1 line 4 

希望有所帮助;）

Answer 2

我认为这样的事情对你有用。 http://jsfiddle.net/6qbxn/2/ 。 我在IE 7＆8和FF 4.0b7中进行了测试，它按预期工作。

JS：

 var withBRs = $('#brText').html(); var textWithBreaks = withBRs.replace(/\/gi,'\r'); $('#area').text(textWithBreaks); 

HTML：

   
Hello 
How
Are
You?
    

编辑：这解决了您的第二个要点。