Tetapan taip rentetan HTML - Limpahan Tindanan

Question

Saya kini mempunyai rentetan kod HTML dan ingin memformat rentetan Adakah terdapat sebarang kaedah yang tersedia? Kami memerlukan pemalam atau kaedah js yang boleh digunakan untuk penukaran dalam projek. Contohnya, rentetan asal ialah: {code...} Tambahkan ruang dan baris baharu untuk menjadi rentetan baharu: {code...}

世界只因有你 · Answer

Penyelesaian pertama ialah menggunakan ungkapan biasa untuk menjawab soalan, tetapi ia tidak berjaya.
Selepas menyusun fikiran saya, saya telah menyelesaikannya dengan sempurna (saya rasa ia sempurna).

function codeFormat(code, indent, tmpIndent){
    var indent = indent || '  ';
    var tmpIndent = tmpIndent || '
';
    var preg = /<(\S*)([^>]*)>([\s\S]*?)/ig;
    return code.replace(preg, function(/*
    感觉没什么难度，一个循环
    遇见 >后跟<，换行
    遇见 < 缩进
    遇见 " && keyNext == "<" ){
            result += "
";
        }
    }
    return result;
}

codeFormat("
This is a p
This is another p
");
/*

  
This is a p
  This is another p

*/
codeFormat('
This is a p
This is another p
', '    ');
/*

    
        
        
    
    
        
            
This is a p
            This is another p
        
    

*/, , , ){
        return tmpIndent + '<' +  +  + '>'
            + codeFormat(, indent, tmpIndent + indent)
            + ( .trim().substr(0,1) == '<' ? tmpIndent : '') 
            + '';
    });
}
codeFormat("
This is a p
This is anothers p
This is a p
This is another p
");
/*

  
This is a p
  This is anothers p


  
This is a p
  This is another p

*/
codeFormat('
This is a p
This is another p
', '----');
/*

----
--------
----
----
--------
------------
This is a p
------------This is another p
--------
----

*/

Berikut ialah jawapan lama untuk gelung:

rrreee

怪我咯 · Answer

Kenapa soalan saya ini terus ditolak undi? Masih soalan yang bagus. . . .
@mqycn , @zhenguoli

Ini adalah rancangan yang ditulis oleh rakan saya @candy:

import _ from 'lodash';

const splitOnTags = str => str.split(/(]+>)/g).filter(line=>line.trim()!="");
const isTag = str => /<[^>!]+>/.test(str);
const isClosingTag = str => /]+>/.test(str);
const isSelfClosingTag = str => /<[^>]+/>/.test(str);
const isOpeningTag = str => isTag(str) && !isClosingTag(str) && !isSelfClosingTag(str);

export default (str, indent) => {
  let depth = 0;
  indent = indent || '    ';

  return splitOnTags(str).map(item=>{
    if(isClosingTag(item)) {
      depth--;
    }

    const line = _.repeat(indent, depth) + item;

    if(isOpeningTag(item)) {
      depth++;
    } 

    return line;
  }).join('
');
}

黄舟 · Answer

http://tool.oschina.net/codef... Dalam talian. Editor lain termasuk mencantikkan

伊谢尔伦 · Answer

Untuk alatan pembangunan, anda boleh mencuba editor VSCode.

https://code.visualstudio.com/

Selepas pemasangan selesai, tekan shift-ctrl-x untuk membuka senarai pemalam, cari Beautify dan pasang untuk mencantikkan kod HTML.
Rujuk tetapan yang sepadan di sini:

https://marketplace.visualstu...

Untuk penukaran format dalam kod, anda boleh menggunakan HTML String Parser, seperti

https://www.npmjs.com/package...

Atau anda boleh menggunakan cheerio untuk menghuraikan teks DOM dan mengeluarkannya semula.

3. (Tidak sukar untuk mencipta semula Penghurai HTML, rujuk lajur saya
http://ewind.us/2016/toy-html...