Formatting HTML code copied from Inspector Element-CodePudding

I have a problem when i copied a code from chrome elements inspector to sublimetext 3, the javascript code have a good format but the html code is showen in one long line, this code have manu div tags.

exemple :

<div id="cmp_name-triggerWrap" data-ref="triggerWrap" ><div id="cmp_name-inputWrap" data-ref="inputWrap" ><input id="cmp_name-inputEl" data-ref="inputEl" type="text" role="textbox" size="1" name="msn_name" placeholder="Name/NO." style="color:gray;font-weight:normal" autocomplete="off" componentid="cmp_name"></div></div></div></div></div></div></div></div><div style="margin: 2px 10px; width: 252px; height: 29px;" id="panel-1012"><div id="panel-1012-body" data-ref="body" role="presentation" style="left: 0px; top: 0px; width: 252px; height: 29px;"><div id="panel-1012-outerCt" data-ref="outerCt" role="presentation" style="width: 100%; table-layout: fixed;"><div id="panel-1012-innerCt" data-ref="innerCt" style="" role="presentation"><div style="width:100%;" id="cmp_addr_type"><label id="cmp_addr_type-labelEl" data-ref="labelEl" style="padding-right:5px;width:25px;" for="cmp_addr_type-inputEl"><span style="width:20px"></span></label><div id="cmp_addr_type-bodyEl" data-ref="bodyEl" ><div id="cmp_addr_type-triggerWrap" data-ref="triggerWrap" ><div id="cmp_addr_type-inputWrap" data-ref="inputWrap" ><input id="cmp_addr_type-inputEl" data-ref="inputEl" type="text" role="combobox" size="1" name="msn_addr_type" placeholder="Address Type" readonly="readonly" style="color:gray;font-weight:normal" autocomplete="off" componentid="cmp_addr_type"></div><div id="cmp_addr_type-trigger-picker" ></div><div id="cmp_addr_type-trigger-clear" ></div></div></div></div>*

thnaks

CodePudding user response：

what I've found out so far is that the copied element is only formatted when the HTML file is already formatted itself. For example, if it's a React web app, the copied element is not formatted.

In this case, I'd suggest you use an online beautifier or any other beautifier tool. I use this tool: https://webformatter.com/html

CodePudding user response：

I'm using a plugin for similar tasks: Prettify.

Applying to your sample yields the following:

<div id="cmp_name-triggerWrap" data-ref="triggerWrap" >
  <div id="cmp_name-inputWrap" data-ref="inputWrap" ><input
      id="cmp_name-inputEl" data-ref="inputEl" type="text" role="textbox" size="1"
      name="msn_name" placeholder="Name/NO." style="color:gray;font-weight:normal"
      
      autocomplete="off" componentid="cmp_name"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div  style="margin: 2px 10px; width: 252px; height: 29px;"
  id="panel-1012">
  <div id="panel-1012-body" data-ref="body" 
    role="presentation" style="left: 0px; top: 0px; width: 252px; height: 29px;">
    <div id="panel-1012-outerCt" data-ref="outerCt" 
      role="presentation" style="width: 100%; table-layout: fixed;">
      <div id="panel-1012-innerCt" data-ref="innerCt" style="" 
        role="presentation">
        <div 
          style="width:100%;" id="cmp_addr_type"><label id="cmp_addr_type-labelEl"
            data-ref="labelEl" 
            style="padding-right:5px;width:25px;" for="cmp_addr_type-inputEl"><span
              
              style="width:20px"></span></label>
          <div id="cmp_addr_type-bodyEl" data-ref="bodyEl" >
            <div id="cmp_addr_type-triggerWrap" data-ref="triggerWrap" >
              <div id="cmp_addr_type-inputWrap" data-ref="inputWrap" ><input
                  id="cmp_addr_type-inputEl" data-ref="inputEl" type="text"
                  role="combobox" size="1" name="msn_addr_type" placeholder="Address Type"
                  readonly="readonly" style="color:gray;font-weight:normal"
                  
                  autocomplete="off" componentid="cmp_addr_type"></div>
              <div id="cmp_addr_type-trigger-picker" ></div>
              <div id="cmp_addr_type-trigger-clear" ></div>
            </div>
          </div>
        </div>

(because your original code is invalid HTML and has unbalanced tags)