suchen

Heim  >  Fragen und Antworten  >  Hauptteil

HTML-String-Schriftsatz – Stapelüberlauf

Ich habe jetzt eine HTMLCodezeichenfolge und möchte die Zeichenfolge formatieren. Gibt es eine verfügbare Methode?

Sie benötigen ein js-Plug-in oder eine js-Methode, die für die Konvertierung im Projekt verwendet werden kann.

Zum Beispiel lautet die Originalzeichenfolge: 

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

Fügen Sie Leerzeichen und Zeilenumbrüche hinzu, um eine neue Zeichenfolge zu erstellen:

<p>
    <p>This is a p</p>
    <p>This is another p</p>
</p>
迷茫迷茫2769 Tage vor831

Antworte allen(4)Ich werde antworten

  • 世界只因有你

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

    第一种方案想用正则做答没成功，没有成功。
    整理了下思路，已经完美解决（自认为完美）。

    function codeFormat(code, indent, tmpIndent){
    var indent = indent || '  ';
    var tmpIndent = tmpIndent || '\n';
    var preg = /<(\S*)([^>]*)>([\s\S]*?)<\/\1>/ig;
    return code.replace(preg, function($0, $1, $2, $3){
        return tmpIndent + '<' + $1 + $2 + '>'
            + codeFormat($3, indent, tmpIndent + indent)
            + ( $3.trim().substr(0,1) == '<' ? tmpIndent : '') 
            + '</' + $1 + '>';
    });
}
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>
*/

    以下是循环的老答案：

    /*
    感觉没什么难度，一个循环
    遇见 >后跟<，换行
    遇见 < 缩进
    遇见 </ 取消缩进
*/
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>
*/

    Antwort
    0
  • 怪我咯

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

    为什么我这个问题一直被踩？还是一个不错的问题的嘛。。。。
    @mqycn , @zhenguoli

    这是朋友@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');
}

    Antwort
    0
  • 黄舟

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

    http://tool.oschina.net/codef... 在线的。其他的编辑器里面有beautify

    Antwort
    0
  • 伊谢尔伦

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

    1. 对开发工具而言，你可以尝试 VSCode 编辑器。

    https://code.visualstudio.com/

    安装完成后，按 shift-ctrl-x 打开插件列表，搜索 Beautify 并安装，即可实现 HTML 代码美化。
    相应设置参考这里：

    https://marketplace.visualstu...

    1. 在代码中进行格式转换可以使用 HTML String Parser，例如

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

    或者使用 cheerio 解析 DOM 文本后重新输出亦可。

    3.（重新制作一个 HTML Parser 并不困难，参考我的专栏
    http://ewind.us/2016/toy-html...

    Antwort
    0
  • StornierenAntwort