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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial