सवाल किसी सामग्रीग्रस्त तत्व में एचटीएमएल के साथ चयनित पाठ को कैसे बदलें? [डुप्लिकेट]


इस प्रश्न का उत्तर यहां दिया गया है:

एक संतोषजनक तत्व के साथ मैं चयनित सामग्री को अपने स्वयं के एचटीएमएल से कैसे बदल सकता हूं?


44
2018-06-06 12:24


मूल


इस प्रश्न का दूसरा भाग ("चयनित टेक्स्ट को अपने स्वयं के एचटीएमएल के साथ प्रतिस्थापित करें") का जवाब उस प्रश्न में उत्तर नहीं दिया गया है, जिसके लिए यह एक डुप्लिकेट है। - Brian M. Hunt
मैंने "प्रश्न प्रति प्रश्न" नियम का अनुपालन करने के लिए पहले ही उत्तर दिए गए हिस्से को हटा दिया है। - FakeRainBrigand


जवाब:


काम करने के लिए यहां देखें जेएसफ़िल्ड: http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

कोड से लिया गया टिम डाउन: उपयोगकर्ता द्वारा चुने गए पाठ से एचटीएमएल वापस करें


69
2018-06-06 12:45



यह परिचित लग रहा है ... stackoverflow.com/questions/4652734/... - Tim Down
किसी अन्य उत्तर से कोड का पुन: उपयोग करना ठीक है, लेकिन यह उल्लेख करने के लिए विनम्र होगा कि आपको यह कहां से मिला। - Tim Down
@ टिम डाउन: इसके बारे में क्षमा करें। मुझे कोड विशेषता है। मैं हमेशा पहले अपने पाठ को एक टेक्स्ट एडिटर में प्रारूपित करता हूं और आपके प्रश्न का एक लिंक अंत में था और मुझे लगता है कि मैंने पेस्ट करने से पहले सब कुछ कॉपी नहीं किया है (आपको इसके लिए मेरा शब्द नहीं लेना है)। यह वास्तव में मेरे हिस्से पर एक ईमानदार गलती थी और मैं अपना जवाब अपडेट करूंगा। - Jordan Arron
यह ठीक है :) यह कोड का उचित उपयोग था, यह सभी के लिए उपयोग करने के लिए स्वतंत्र है और मुझे वास्तव में कोई फर्क नहीं पड़ता। - Tim Down
@ टिम डाउन, मुझे लगता है कि यह चापलूसी का संकेत हो सकता है, अन्य लोग आपके कोड का उपयोग कर सकते हैं। स्पष्ट रूप से यह सही जवाब था, हालांकि क्रेडिट प्राप्त करना हमेशा अच्छा होता है। - ars265


चयनित HTML प्राप्त करने के लिए, आप जिस फ़ंक्शन के लिए मैंने लिखा था उसका उपयोग कर सकते हैं यह प्रश्न। अपने स्वयं के एचटीएमएल के साथ चयन को प्रतिस्थापित करने के लिए, आप इसका उपयोग कर सकते हैं यह समारोह। यहां replacer फ़ंक्शन का एक संस्करण है जो एक डोम नोड के बजाय एक HTML स्ट्रिंग डालने वाला है:

function replaceSelectionWithHtml(html) {
    var range;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        var div = document.createElement("div");
        div.innerHTML = html;
        var frag = document.createDocumentFragment(), child;
        while ( (child = div.firstChild) ) {
            frag.appendChild(child);
        }
        range.insertNode(frag);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

replaceSelectionWithHtml("<b>REPLACEMENT HTML</b>");

48
2018-06-06 13:41



अच्छा Reaaaaaaaaaaaaaaaly :) धन्यवाद टिम +1 - Marwan
वास्तव में सवाल का जवाब देने के लिए बहुत बढ़िया, और बोनस अंक: चयन न केवल कैसे प्राप्त करें, बल्कि इसे प्रतिस्थापित करें। - tobek
कृपया परिभाषित करो node। मुझे लगता है कि हम सिर्फ इस लाइन को हटा सकते हैं html = (node.nodeType == 3) ? node.data : node.outerHTML; - H Dog
@HDog: हाँ, तुम सही हो। ऐसा लगता है कि एक कॉपी-पेस्ट लाइन जिसे मैं निकालना भूल गया था। मैंने इसे अभी हटा दिया है। धन्यवाद। - Tim Down
@flen: द var जावास्क्रिप्ट में कथन आपको एक ही कथन में एकाधिक चर घोषित करने की अनुमति देता है, जो अल्पविराम से अलग होता है, प्रत्येक परिवर्तनीय वैकल्पिक रूप से प्रारंभिक मान होता है। एमडीएन में अधिक जानकारी - Tim Down