简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

Tetapan taip rentetan HTML - Limpahan Tindanan

Saya kini mempunyai rentetan HTMLkod dan ingin memformat rentetan Adakah terdapat sebarang kaedah yang tersedia?

Anda memerlukan pemalam atau kaedah js yang boleh digunakan untuk penukaran dalam projek.

Sebagai contoh, rentetan asal ialah: 

<p><p>This is a p</p><p>This is another p</p></p>

Tambah ruang dan baris baharu untuk menjadi rentetan baharu:

<p>
    <p>This is a p</p>
    <p>This is another p</p>
</p>
迷茫迷茫2675 hari yang lalu721

membalas semua(4)saya akan balas

  • 世界只因有你

    世界只因有你2017-05-24 11:38:25

    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 || '\n';
    var preg = /<(\S*)([^>]*)>([\s\S]*?)<\/>/ig;
    return code.replace(preg, function(
    /*
    感觉没什么难度，一个循环
    遇见 >后跟<，换行
    遇见 < 缩进
    遇见 </ 取消缩进
*/
function codeFormat(code, indent){
    var indent = indent || "  ";    //缩进字符
    var tmpIndent = "";    //保存代码字符串
    var result = "", key = "", keyNext = "";
    for( var i = 0 ; i < code.length ; i++ ){
        key = code[i];
        keyNext = i < code.length-1 ? code[i+1] : "";
        if(key == "<"){
            if( keyNext == "/" ){
                tmpIndent = tmpIndent.substr(indent.length);
            }
            if( result[result.length-1] == "\n" ){
                result += tmpIndent;
            }
            if( keyNext != "/" ){
                tmpIndent += indent;
            }
        }
        result += key;
        if(key == ">" && keyNext == "<" ){
            result += "\n";
        }
    }
    return result;
}

codeFormat("<p><p>This is a p</p><p>This is another p</p></p>");
/*
<p>
  <p>This is a p</p>
  <p>This is another p</p>
</p>
*/
codeFormat('<html><head><title></title></head><body class="haha"><p style="background:#C00;"><p>This is a p</p><p>This is another p</p></p></body></html>', '    ');
/*
<html>
    <head>
        <title>
        </title>
    </head>
    <body class="haha">
        <p style="background:#C00;">
            <p>This is a p</p>
            <p>This is another p</p>
        </p>
    </body>
</html>
*/
    , , , ){
        return tmpIndent + '<' +  +  + '>'
            + codeFormat(, indent, tmpIndent + indent)
            + ( .trim().substr(0,1) == '<' ? tmpIndent : '') 
            + '</' +  + '>';
    });
}
codeFormat("<p><p>This is a p</p><p>This is anothers p</p></p><p><p>This is a p</p><p>This is another p</p></p>");
/*
<p>
  <p>This is a p</p>
  <p>This is anothers p</p>
</p>
<p>
  <p>This is a p</p>
  <p>This is another p</p>
</p>
*/
codeFormat('<html><head><title></title></head><body class="haha"><p style="background:#C00;"><p>This is a p</p><p>This is another p</p></p></body></html>', '----');
/*
<html>
----<head>
--------<title></title>
----</head>
----<body class="haha">
--------<p style="background:#C00;">
------------<p>This is a p</p>
------------<p>This is another p</p>
--------</p>
----</body>
</html>
*/

    Berikut ialah jawapan lama untuk gelung:

    rrreee

    balas
    0
  • 怪我咯

    怪我咯2017-05-24 11:38:25

    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('\n');
}

    balas
    0
  • 黄舟

    黄舟2017-05-24 11:38:25

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

    balas
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-24 11:38:25

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

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

    balas
    0
  • Batalbalas