0

I am trying to convert Html in below structure but I don't how to achieve this.

I have 2 text area one for input HTML Value and second for Output that I want. I want when I give

INPUT: Original HTML Code:

<div class='first_class second_class thrid_c..' id="myid">
      <div style='blackground: red;color: white;' >
          <img src='http://ddd.com/photo.jpg' height='10'>
          <span> My text Class </span>
      </div>
</div>

Output Code Structure will be:

appendMultipleNodes(
        createNewElement('div', {'class': 'first_class second_class thrid_c..'', 'id': 'myid' }),
        appendMultipleNodes(
             createNewElement('div', {'style': 'blackground: red;color: white;' }),
             createNewElement('div', {'src': 'http://ddd.com/photo.jpg', 'height': '10' }),
             createNewElement('span', {'text': 'My text Class' })
         )
    )

INPUT: If HTML Code:

<div class="position-fixed bottom-0 end-0 p-3" style="">
    <div id="liveToast" class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" style="">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" focusable="false">
               <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>

            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
         </div>
    </div>
</div>

Output Code Structure will be:

appendMultipleNodes(
    createNewElement('div', {'class': 'position-fixed bottom-0 end-0 p-3', 'style': '' }),
    appendMultipleNodes(
        createNewElement('div', {'id': 'liveToast', 'class': 'toast fade', 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true', 'style': ''  }),
        appendMultipleNodes(
            createNewElement('div', {'class': 'toast-header'}),
            appendMultipleNodes(
                createNewElement('svg', {'class': 'bd-placeholder-img rounded me-2', 'width': '20', 'height': '20', 'xmlns': 'http://www.w3.org/2000/svg', 'focusable': 'false'}),
                createNewElement('rect', {'width': '100%', 'height': '100%', 'fill': '#007aff'})
            ),
            createNewElement('strong', {'class': 'me-auto', 'text': 'Bootstrap'}),
            createNewElement('small', {'text': '11 mins ago'}),
            createNewElement('button', {'class': 'btn-close', 'type': 'button', 'data-bs-dismiss': 'toast', 'aria-label': 'Close'})    
        ),
        createNewElement('div', {'class': 'toast-body', 'text': 'Hello, world! This is a toast message.'})
     )
)

I have tried Domdocument to achieve this but not achieve the goal. anyone can help me?

  • 1
    Welcome to Stack Overflow. I am confused, what is the "INPUT"? Are files being uploaded? Text being Posted? Is this coming out of a DB? Being pulled in via curl? Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Mar 04 '22 at 16:24
  • Separately: Please choose appropriate tags. Are you doing this with PHP (in which case the [tag:jquery] tag is inappropriate) or with jQuery (which means you're using JavaScript, and [tag:php] is inappropriate). – T.J. Crowder Mar 04 '22 at 16:25
  • Will you rebuild the script output in php? – Z0OM Mar 04 '22 at 16:44
  • Yes I want PHP script that take HTML and output like my structure – Irfanullah Sabir Mar 04 '22 at 16:49
  • @Twisty the first answer of below link is similar to my problem. I want output that mention in question. Can you check this please and help https://stackoverflow.com/questions/23062537/how-to-convert-html-to-json-using-php – Irfanullah Sabir Mar 04 '22 at 17:05
  • @BlockchainOffice – Irfanullah Sabir Mar 04 '22 at 17:05
  • @IrfanullahSabir then you should use the solution provided in that answer. – Twisty Mar 04 '22 at 18:35
  • @Twisty sir provided solution for JSON output but I need different, so please help – Irfanullah Sabir Mar 05 '22 at 06:49
  • @IrfanullahSabir you need different what? No one can help if you are not clear about what you want to accomplish. – Twisty Mar 06 '22 at 15:10

0 Answers0