JS फाइल में html को html स्ट्रिंग में बदलें

Question

मैं JS के माध्यम से कुछ html बनाना चाहता हूं, इसलिए मुझे JS फ़ाइल के अंदर html लिखने की आवश्यकता है:

function createHtmlSection() {
    return "<li class=\"chapter up-wrapper-btn\">" +
        "<div>" +
        "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
        "<label contenteditable=\"true\">section 1</label>" +
        "</div>" +
        "</li>";
}

क्या इस प्रकार का html स्ट्रिंग बनाने के लिए कोई टूल या कुछ शॉर्टकट है?

मेरा मतलब है, इस मामले में मुझे यह सब html हाथ से टाइप करने की जरूरत थी। के साथ +और "संकेत जोड़ने की जरूरत है ।

कुछ जो इसे परिवर्तित कर सकते हैं:

<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>

पहली स्ट्रिंग के लिए जिसे मुझे हाथ से टाइप करना था

Comments

आपकी स्क्रिप्ट को वह HTML कहाँ से मिलेगी जिसे आप एक स्ट्रिंग में बदलना चाहते हैं?

— जॉर्ज बोरा

इस पोस्ट को आपकी समस्या का जवाब देना चाहिए: stackoverflow.com/questions/220603/…

— lainatnavi

क्या पूछते हैं?

— मावग का कहना है कि मोनिका

Answer 1

आप एक का उपयोग कर सकते हैं टेम्पलेट शाब्दिक का (बैक-टिक्स पर ध्यान दें)। शाब्दिक मल्टीलाइन का समर्थन करता है, और आपको उद्धरणों से बचने की आवश्यकता नहीं होगी (आपको बैक-टिक्स से बचने की आवश्यकता होगी)।

`<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`

उदाहरण:

function createHtmlSection() {
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">section 1</label>
         </div>
    </li>
  `;
}


document.querySelector('#root')
  .innerHTML = createHtmlSection();

<ul id="root"></ul>

आप फ़ंक्शन को पैरामीटर भी पास कर सकते हैं, और उन्हें अभिव्यक्ति प्रक्षेप का उपयोग करके स्ट्रिंग में सम्मिलित कर सकते हैं :

function createHtmlSection(label) {
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">${label}</label>
         </div>
    </li>
  `;
}


document.querySelector('#root')
  .innerHTML = createHtmlSection('!!! section !!!');

<ul id="root"></ul>

Comments

अच्छा उत्तर, लेकिन यह कहना महत्वपूर्ण है कि यह ईएस 6-सिंटेक्स है जो सभी ब्राउज़रों द्वारा समर्थित नहीं है। इसलिए आपको अपने कोड को ब्राउज़र-संगत जावास्क्रिप्ट (ES5) पर संकलित करने के लिए बैबेल की तरह कुछ की आवश्यकता होगी ।

— एलेक्स-एचएम

यही कारण है कि मैं एमडीएन के लिए एक लिंक जोड़ता हूं। उनके तल में एक संगतता तालिका है। वर्तमान में एकमात्र ब्राउज़र जो टेम्पलेट शाब्दिक का समर्थन नहीं करता है वह IE है।

— ओरी ड्रोरी

Answer 2

अपनी JS फाइल को अपडेट करें:

function createHtmlSection() {
    return `
             <li class="chapter up-wrapper-btn">
                <div>
                  <button>
                     <i class="fa fa-plus" onclick="addSection('up',this)"></i> 
                  </button>
                  <label contenteditable="true">section 1</label>
               </div>
             </li>
          `
}

अधिक जानकारी के लिए इस लिंक को पढ़ें: टेम्पलेट शाब्दिक

Answer 3

आप '(एक उद्धरण) का भी उपयोग कर सकते हैं ताकि आपको हर जगह सामने / सामने न आना पड़े "

Answer 4

बस टेम्पलेट शाब्दिक का उपयोग करें (एक भी उद्धरण नहीं "" "लेकिन पीछे टिक" "") इस तरह:

// JavaScript

document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`

<!-- HTML -->

<div id="a"></div>

टेम्प्लेट शाब्दिक स्ट्रिंग शाब्दिक हैं जो एम्बेडेड अभिव्यक्ति की अनुमति देते हैं। आप उनके साथ मल्टी-लाइन स्ट्रिंग्स और स्ट्रिंग इंटरपोलेशन सुविधाओं का उपयोग कर सकते हैं। ES2015 विनिर्देश के पूर्व संस्करणों में उन्हें "टेम्पलेट स्ट्रिंग्स" कहा गया था।

Via - MDN वेब डॉक्स

Answer 5

एक वैकल्पिक विधि एकल उद्धरण का उपयोग करना और न्यूलाइन वर्ण से बचना है।

कुछ इस तरह:

function createHtmlSection() {
    return '<li class="chapter up-wrapper-btn">\
        <div>\
            <button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
            <label contenteditable="true">section 1</label>\
        </div>\
    </li>';
}

console.log(createHtmlSection());

सिंगल कोट्स पर स्वैप करने से आप HTML में डबल कोट्स से बच सकते हैं, लेकिन आपको अभी भी सिंगल कोट्स को कोट करना होगा।

---

एक और विकल्प एक सरणी का उपयोग करना है और .join('')यह है:

function createHtmlSection() {
    return [
	'<li class="chapter up-wrapper-btn">',
            '<div>',
                '<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
                '<label contenteditable="true">section 1</label>',
            '</div>',
        '</li>'
    ].join('');
}

console.log(createHtmlSection());

यह आपको बाद में कोड के कुछ हिस्सों को आसानी से जोड़ने / संपादित करने / हटाने की अनुमति देता है।

---

ये दोनों विकल्प ES5 या पुराने के लिए हैं।

आधुनिक ब्राउज़र के लिए, कृपया Ori Drori द्वारा प्रदान किए गए ES6 संस्करण का उपयोग करें ।