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

Question

这是一个相当讨论jQuery论坛的问题，但我无法弄清楚我的情况的解决方案。

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

<li id="item_1"> 
<div class="note"> 
    This is the text that shows when this element is truncated <span style="display: none;" class="truncate_ellipsis">...</span> 
<span style="display: inline;" class="truncate_more">This is the text that will be hidden if the user clicks on the 'hide' button</span> 
</div> 
<div class="toggle_wrapper"> 
    <div class="note_toggle"> 
     <a href="#" class="truncate_more_link">Hide note</a> 
    </div> 
    <div style="display: block;" class="note_controls"> 
     <span class="edit_note"><a href="#note_textfield" id="edit_note_1">Edit</a></span> | <span class="delete_note"><a href="#" id="delete_note_1">Delete</a></span> 
    </div> 
</div> 
</li> 

我的问题是，用户点击'编辑'，它将div的内容与'note'类相关联，并将其分配给文本区域。用户可以编辑文本并保存。我使用下面的脚本来获取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 nl2br (str, is_xhtml) { 
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';  
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2'); 
} 

这一切都在Firefox /铬/歌剧/ Safari的罚款......然而，IE摆脱了线的突破时，它通过jQuery text（）函数抓取文本。这在本页面的jQuery文档上的评论讨论：

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

有些人通过克隆源元素获得了成功，在“前”标签包装它，然后服用了内容，并它在文本区域。这适用于换行符，但也带来了额外的空间，选项卡等，它看起来有点乱。更好的解决方案似乎是使用html（）jQuery函数来抓取文本，然后替换br的换行符，并去除其他任何html格式。

我是新来的Javascript，但我在正则表达式的垃圾，所以我不会有一个线索如何做到这一点，我没时间了！我需要一个正则表达式，或者只是一些帮助与字符串格式化做到以下几点：

• 删除字符串中的所有span标签不去除跨度的内容（我的截断功能增加了一个跨度带班“ truncate_more” ......见上面的html代码）

• 删除BR的并用换行符，将在textarea元素中正确显示，是跨浏览器

OR ..如果任何人都知道一致拆换一个更好的解决方法到这个IE/textarea/linebreak问题，我真的很感激一个白痴指南:)

相当多的信息可能是一个简单的解决方案，但我想尽我所能解释的情况！任何帮助将非常感激....

编辑：'TheJuice的答案下面的br/IE换行符问题工作（谢谢！），但我需要执行类似的正则表达式来摆脱跨越，因为它们只是封装了一些文本。我尝试以下，这似乎在Firefox，但在IE做工精细跨度保持：

 var withBRs = currentNote.html(); 
    var textWithBreaks = withBRs.replace(/\<br\>/gi,'\r'); 
    textWithBreaks = textWithBreaks.replace(/\<.*span.*\>/g, ''); 

ANOTHER编辑：“TheJuice”解决了这个问题太...无视我的正则表达式的可怕，只是做他如果你发现自己处于相同的状况！感谢所有提供建议的人......

Answer 1

这是一个更简单的解决方案，可以根据使用<br>或<p>标签将任何HTML转换为带有换行符的纯文本。

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

例如，调用下面的方法：

htmlDecodeWithLineBreaks('line 1<br>line &amp; 2<br />' + 
    'line &gt; 3<p>paragraph 1</p>line 4') 

回报：

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

希望帮助;）

Answer 2

我觉得像这样的东西会适合你。 http://jsfiddle.net/6qbxn/2/。我在IE 7 FF 4.0b7中测试过它，它按预期工作。

JS：

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

HTML：

<HTML> 
<body> 
    <div id="brText">Hello <br>How<br>Are<br>You?</div> 
    <textarea rows="10" id="area"> 

    </textarea> 
</body> 

编辑：这解决了你的第二个圆点。