HTML string typesetting - Stack Overflow

Question

I now have a string of HTML code and want to format the string. Is there any available method? We need a js plug-in or method that can be used for conversion in the project. For example, the original string is: {code...} Add spaces and newlines to become a new string: {code...}

世界只因有你 · Answer

The first solution was to use regular expressions to answer the question, but it didn’t work.
I sorted out my thoughts and have solved it perfectly (I think it is perfect).

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

*/

Here is the old answer for loops:

rrreee

怪我咯 · Answer

Why does this question of mine keep getting downvoted? Still a good question. . . .
@mqycn , @zhenguoli

This is a plan written by my friend @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... online. Other editors include beauty

伊谢尔伦 · Answer

For development tools, you can try the VSCode editor.

https://code.visualstudio.com/

After the installation is complete, press shift-ctrl-x to open the plug-in list, search for Beautify and install it to beautify HTML code.
Refer to here for the corresponding settings:

https://marketplace.visualstu...

For format conversion in code, you can use HTML String Parser, such as

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

Or you can use cheerio to parse the DOM text and re-output it.

3. (It is not difficult to re-create an HTML Parser, refer to my column
http://ewind.us/2016/toy-html...