2010-12-21 19 views
7

में लाइन ब्रेक खो देता है यह jQuery मंचों पर समस्या के बारे में काफी बात करता है लेकिन मैं अपनी स्थिति के लिए समाधान नहीं समझ सकता।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 की सामग्री को हड़पने और पाठ क्षेत्र निर्दिष्ट करने के लिए:

$('.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(); 

}); 

एक बार जब यह असाइन करने से पहले, मैं एक समारोह मैं ऑनलाइन पाया कन्वर्ट करने के लिए लाइन बैंक रसीदों को टूट जाता है का उपयोग कर रहा सहेज लिया जाता है वापस उचित सूची आइटम के भीतर 'ध्यान दें' 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'); 
} 

यह सब फ़ायरफ़ॉक्स/क्रोम/ओपेरा/सफारी में ठीक काम करता है ... लेकिन, आईई लाइन से छुटकारा मिलता है टूट जाता है जब यह jQuery पाठ() फ़ंक्शन के माध्यम से पाठ को पकड़ता है। यह jQuery प्रलेखन पर इस पेज की टिप्पणियों में चर्चा की है:

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

कुछ लोगों को स्रोत तत्व क्लोनिंग द्वारा सफलता मिली है, 'पूर्व' टैग में यह लपेटकर, तो उस की सामग्री लेने और डाल यह पाठ क्षेत्र में है। यह लाइन ब्रेक के लिए काम करता है लेकिन अतिरिक्त रिक्त स्थान, टैब इत्यादि भी लाता है और यह थोड़ा गड़बड़ दिखता है। पाठ को पकड़ने के लिए एचटीएमएल() jQuery फ़ंक्शन का उपयोग करने के लिए एक बेहतर समाधान प्रतीत होता है, फिर लाइन ब्रेक के लिए ब्रश को प्रतिस्थापित करें, और किसी भी अन्य HTML स्वरूपण को बाहर निकालें।

हालांकि मैं जावास्क्रिप्ट के लिए नया हूं, और मैं नियमित अभिव्यक्तियों पर बकवास कर रहा हूं इसलिए मुझे कोई संकेत नहीं होगा कि यह कैसे करें और मैं समय से बाहर हो रहा हूं! मैं स्ट्रिंग स्वरूपण के साथ एक नियमित अभिव्यक्ति है, या बस कुछ मदद की ज़रूरत है निम्न कार्य करें:

  • निकालें अवधि की सामग्री को हटाने के बिना एक स्ट्रिंग से सभी अवधि टैग (मेरी truncate समारोह वर्ग "के साथ एक अवधि कहते हैं truncate_more "... ऊपर एचटीएमएल कोड)

  • निकालें br देखते हैं और उन्हें न्यू लाइन अक्षर हैं जो एक पाठ क्षेत्र तत्व में सही ढंग से प्रदर्शित और ब्राउज़रों

या .. किसी के जानता है भर में लगातार हो जाएगा के साथ बदलें एक बेहतर कामकाज इस आईई/टेक्स्टरेरा/लाइनब्रेक मुद्दे के लिए, मैं वास्तव में एक बेवकूफ गाइड की सराहना करता हूं :)

शायद एक साधारण समाधान के लिए थोड़ी सी जानकारी है लेकिन मैंने सोचा कि मैं स्थिति को समझाने की कोशिश करूंगा जितना मैं कर सकता हूं ! किसी भी मदद बेहद सराहना की जाएगी ....

संपादित: 'नीचे br के लिए काम किया TheJuice का जवाब/आईई लाइन मुद्दा टूट जाता है (धन्यवाद!), लेकिन मैं से छुटकारा पाने के लिए एक समान regex बाहर ले जाने की जरूरत है स्पैन, क्योंकि वे केवल कुछ पाठ को समाहित करते हैं।मैं निम्नलिखित है, जो फ़ायरफ़ॉक्स में लेकिन IE में ठीक से काम करने लगता है की कोशिश की फैला रहते हैं:

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

किसी अन्य संपादन का: 'TheJuice' हल इस समस्या को भी ... मेरे भीषण regex ध्यान न दें और बस करो कि वह क्या कहता है कि क्या आप खुद को एक ही स्थिति में पाते हैं! उन सभी को धन्यवाद जिन्होंने सुझाव दिए ...

उत्तर

6

<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 

आशा है कि मदद करता है,,)

+0

सुपर यह Node.js के लिए jQuery 'cheerio' के साथ काम करता है - https://github.com/cheeriojs/cheerio/issues/839 देखें – loretoparisi

6

मुझे लगता है कि ऐसा कुछ आपके लिए काम करेगा। http://jsfiddle.net/6qbxn/2/। मैंने आईई 7 एफएफ 4.0 बी 7 में इसका परीक्षण किया और यह अपेक्षा के अनुसार काम करता है।

जे एस:

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> 

संपादित करें: यह अपने दूसरे बुलेट बिंदु संबोधित करते हैं।

+0

अपनी पहली गोली के रूप में यदि आपके फैला सिर्फ लपेट आपको जिस पाठ की आवश्यकता है, उससे छुटकारा पाने के लिए आप अपने चयनकर्ता को बदल सकते हैं। http://jsfiddle.net/6qbxn/4/ – offner

+0

बहुत बहुत धन्यवाद दोस्तों, यही वही है जो मैं ढूंढ रहा था! मुझे पता था कि यह कुछ आसान होगा। हालांकि, मुझे अभी भी थोड़ी सी समस्या है; अवधि सभी पाठ को समाहित नहीं करती है, यह मध्य मार्ग से शुरू होती है। Div खुलता है, फिर कुछ पाठ होता है, फिर शेष पाठ वाला एक अवधि होता है, इसलिए मुझे वास्तव में उद्घाटन और समापन अवधि टैग को बाहर करना होता है (दिमाग में इनलाइन सीएसएस को खुले रंग के लिए jQuery के माध्यम से शुरुआती टैग में जोड़ा जाता है फ़ंक्शन - ऊपर मार्कअप देखें)। क्या एक समान प्रतिस्थापन समारोह के साथ ऐसा करने का कोई आसान तरीका है? मैं regex करने के लिए नया हूँ तो मेरे प्रयास बहुत दयनीय हैं! –

+0

@Mr_Beagle: मैं पहले स्पैन से HTML का चयन करूंगा, फिर HTML को दूसरी अवधि से इसमें जोड़ें (मान लें कि आपके पास हमेशा 2 स्पैन हैं)। उसके बाद
सामानों को प्रतिस्थापित करें। यदि आप किसी भी कोड को दिखाते हैं तो आप शायद रीगेक्स का उपयोग करने से बचना चाहते हैं, अगर कोई भी "
" जैसे टैग बनाता है तो आप संभवतः तोड़ देंगे। – offner

संबंधित मुद्दे