国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社區(qū)

學習

工具庫

AI工具

休閑

簡體中文

javascript - HTML字符串排版

迷茫 2017-05-24 11:36:25

988

我現(xiàn)在有HTML代碼的字符串，想要對字符串進行排版，有沒有什么可用的方法？

需要一款js插件，或者方法，能在項目里面轉(zhuǎn)換用的。

比如原字符串是：

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

迷茫

業(yè)精于勤，荒于嬉;行成于思，毀于隨。

全部回復(4)

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

第一種方案想用正則做答沒成功，沒有成功。
整理了下思路，已經(jīng)完美解決（自認為完美）。

function codeFormat(code, indent, tmpIndent){
    var indent = indent || '  ';
    var tmpIndent = tmpIndent || '\n';
    var preg = /<(\S*)([^>]*)>([\s\S]*?)<\/>/ig;
    return code.replace(preg, function(/*
    感覺沒什么難度，一個循環(huán)
    遇見 >后跟<，換行
    遇見 < 縮進
    遇見 </ 取消縮進
*/
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>
*/

以下是循環(huán)的老答案：

rrreee

點贊 +0

添加回復

劉奇2017-05-24 11:38:25 3 樓

為什么我這個問題一直被踩？還是一個不錯的問題的嘛。。。。
@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');
}

點贊 +0

添加回復