জেএস ফাইলে এইচটিএমএলকে এইচটিএমএল স্ট্রিংয়ে রূপান্তর করুন

Question

আমি জেএস এর মাধ্যমে কিছু এইচটিএমএল তৈরি করতে চাই, সুতরাং জেএস ফাইলের ভিতরে এইচটিএমএল লিখতে হবে যেমন:

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>";
}

এই জাতীয় এইচটিএমএল স্ট্রিং তৈরি করতে কোনও সরঞ্জাম বা কিছু শর্টকাট আছে?

মানে, এই ক্ষেত্রে আমার হাতে এই সমস্ত এইচটিএমএল টাইপ করা দরকার ছিল। সহ +এবং "সাইন যোগ করার প্রয়োজন ।

এমন কিছু যা এটিকে রূপান্তর করতে পারে:

<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

আপনার স্ক্রিপ্টটি কোথা থেকে এইচটিএমএল পাবেন যেখানে আপনি স্ট্রিংয়ে রূপান্তর করতে চান?

— জর্জ বোরা

: এই পোস্টটি আপনার সমস্যা উত্তর দিতে হবে 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>

আপনি ফাংশনটিতে প্যারামিটারগুলিও পাস করতে পারেন এবং এক্সপ্রেশন ইন্টারপোলেশন ব্যবহার করে স্ট্রিংয়ে এগুলি sertোকাতে পারেন :

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

উত্তম উত্তর, তবে এটি বলাই গুরুত্বপূর্ণ যে এটি ES6-Syntax যা সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়। সুতরাং আপনার কোডটি ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ জাভাস্ক্রিপ্ট (ES5) তে সংকলিত করার জন্য আপনার বাবেলের মতো কিছু দরকার ।

— অ্যালেক্স-এইচএম

এজন্য আমি এমডিএন-তে একটি লিঙ্ক যুক্ত করব। তারা নীচে একটি সামঞ্জস্য টেবিল আছে। বর্তমানে কেবলমাত্র ব্রাউজার যা টেম্পলেট লিটারাল সমর্থন করে না তা হ'ল আইই।

— ওরি দ্রোড়ি

Answer 2

আপনার জেএস ফাইলটি এতে আপডেট করুন:

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 নির্দিষ্টকরণের পূর্ববর্তী সংস্করণগুলিতে তাদের "টেম্পলেট স্ট্রিং" বলা হত।

মাধ্যমে - এমডিএন ওয়েব ডক্স

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());

একক উদ্ধৃতিতে অদলবদল আপনাকে এইচটিএমএলে ডাবল উদ্ধৃতি থেকে বাঁচানোর হাত থেকে বাঁচায়, তবে আপনাকে এখনও একক উদ্ধৃতি উদ্ধৃত করতে হবে।

---

অন্য বিকল্প হ'ল একটি অ্যারে ব্যবহার করা এবং .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 বা তার চেয়েও পুরনো for

আধুনিক ব্রাউজারে জন্য, দয়া করে ব্যবহার ES6 সংস্করণ দ্বারা উপলব্ধ Ori থেকে Drori ।