converti html in stringa html nel file JS

14

Voglio creare qualche HTML tramite JS, quindi ho bisogno di scrivere l'html all'interno del file JS come:

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

c'è uno strumento o qualche scorciatoia per creare questo tipo di stringa html?

Voglio dire, in questo caso mi è stato necessario digitare tutto questo HTML a mano. con +e necessario aggiungere il "segno.

Qualcosa che può convertire questo:

<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>

alla prima stringa che dovevo digitare a mano

javascript html

— Devy
fonte

Da dove il tuo script otterrà l'HTML che vuoi convertire in una stringa?

— George Bora,

Questo post dovrebbe rispondere il vostro problema: stackoverflow.com/questions/220603/...

— lainatnavi

Qual è la tua domanda?

— Mawg dice di ripristinare Monica il

7

È possibile utilizzare un modello letterale (notare i segni di spunta). Il letterale supporta multilinea e non dovrai sfuggire alle virgolette (dovrai sfuggire ai segni di spunta).

`<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>`

Esempio:

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>

Espandi frammento

Puoi anche passare parametri alla funzione e inserirli nella stringa usando l' interpolazione delle espressioni :

Mostra snippet di codice

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>

Espandi frammento

— Ori Drori
fonte

3

Buona risposta, ma è importante dire che questa è la sintassi ES6 che non è supportata da tutti i browser. Quindi avresti bisogno di qualcosa come Babel per compilare il tuo codice in JavaScript (ES5) compatibile con il browser.

— Alex-HM,

2

Questo è il motivo per cui aggiungo un collegamento a MDN. Hanno una tabella di compatibilità in fondo. Attualmente l'unico browser che non supporta i letterali modello è IE.

— Ori Drori,

3

aggiorna il tuo file JS a:

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>
          `
}

Leggi questo link per ulteriori informazioni: letterali template

— Maryam
fonte

1

Puoi anche utilizzare "(una virgoletta) in modo da non dover mettere / fronteggiare ogni"

— ahmetbcakici
fonte

1

Usa letterali template (non una sola virgoletta "" "ma il segno di spunta" "") in questo modo:

// 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>

Espandi frammento

I letterali modello sono letterali stringa che consentono espressioni incorporate. È possibile utilizzare stringhe multilinea e funzioni di interpolazione delle stringhe con esse. Erano chiamati "stringhe modello" nelle precedenti edizioni della specifica ES2015.

Via - MDN Web Docs

— AndrewL64
fonte

1

Un metodo alternativo consiste nell'utilizzare virgolette singole e sfuggire al carattere di nuova riga.

Qualcosa come questo:

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

Espandi frammento

Lo scambio tra virgolette singole ti evita di sfuggire alle virgolette doppie nell'HTML, ma devi comunque citare le virgolette singole.

Un'altra alternativa è usare un array e .join('')questo:

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

Espandi frammento

Ciò consente di aggiungere / modificare / eliminare facilmente parti del codice in un secondo momento.

Entrambe queste opzioni sono per ES5 o precedenti.

Per browser moderno, si prega di utilizzare la versione ES6 fornito da Ori Drori .

— Ismael Miguel
fonte