Функция jQuery text () теряет разрывы строк в IE

Это довольно обсуждаемая проблема на форумах jQuery, но я не могу найти решение для моей ситуации.

У меня есть неупорядоченный список с некоторыми текстовыми элементами в них ... пользователь может создавать новые элементы списка через jQuery, которые сохраняются в базе данных SQL. Они также могут редактировать существующие элементы списка. Кроме того, поскольку текст в каждом элементе списка может быть довольно длинным, у них есть возможность «скрыть» каждый элемент списка, чтобы он отображал усеченную версию строки. Это обрабатывается специальным плагином jQuery, который обрезает элементы списка, длина которых превышает определенную длину ... вот как выглядит каждый элемент списка после того, как плагин усечения отформатировал его:

  • 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
  • У меня проблема в том, что пользователь нажимает на ' edit ', и он берет содержимое div с классом note и назначает его текстовой области. Затем пользователь может отредактировать текст и сохранить его. Я использую следующий сценарий, чтобы захватить содержимое div и назначить его текстовому полю:

    $('.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' в соответствующем элементе списка:

    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' , затем взяв его содержимое и поместив в текстовую область. Это работает для разрывов строк, но также приводит к лишним пробелам, табуляциям и т. Д., И это выглядит немного беспорядочно. Похоже, что лучшим решением будет использование функции jQuery html () для захвата текста, затем замены br для разрывов строк и удаления любого другого форматирования html.

    Однако я новичок в Javascript, и я чушь в регулярных выражениях, чтобы я не имел ни малейшего понятия, как это сделать, а время у меня заканчивается! Мне нужно регулярное выражение, или просто помощь с форматированием строки, чтобы сделать следующее:

    • удалить все теги диапазона из строки БЕЗ удаления содержимого диапазона (моя функция truncate добавляет диапазон с классом truncate_more ... см. html-код выше)

    • удалите br и замените их символами новой строки, которые будут корректно отображаться в элементе textarea и будут согласованы во всех браузерах

    ИЛИ ... если кто-нибудь знает лучший способ решения этой проблемы IE / textarea / linebreak, я бы действительно ценю руководство для идиотов :)

    Довольно много информации для того, что, вероятно, является простым решением, но я подумал, что постараюсь объяснить ситуацию как можно лучше! Мы будем очень благодарны за любую помощь ....

    РЕДАКТИРОВАТЬ : 'Ответ TheJuice, приведенный ниже, работал с проблемой разрывов строк br / IE (спасибо!), но мне нужно выполнить аналогичное регулярное выражение, чтобы избавиться от промежутков, поскольку они инкапсулируют только часть текста. Я пробовал следующее, что, кажется, отлично работает в firefox, но в IE промежутки остаются:

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

    ДРУГОЕ ИЗМЕНИТЬ : «TheJuice» тоже решил эту проблему ... игнорируйте мое ужасное регулярное выражение и просто делайте то, что он говорит, если вы попадаете в такую ​​же ситуацию! Спасибо всем, кто предлагал ...

    7
    задан Mr_Beagle 22 December 2010 в 00:01
    поделиться