jQuery text() 函数在 IE 中丢失换行符

Question

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

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

<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 的内容并将其分配给文本区域。然后用户可以编辑文本并保存它。我正在使用以下脚本来获取 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();

});

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

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/chrome/opera/safari 中都可以正常工作……但是，IE 在通过 jQuery text() 函数获取文本时摆脱了换行符。这在 jQuery 文档的本页的 cmets 中进行了讨论：

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(/\<br\>/gi,'\r');
    textWithBreaks = textWithBreaks.replace(/\<.*span.*\>/g, '');

另一个编辑：“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 & 8 & 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>

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