Replace multiple &nbsp with multiple whitespace

I retrieve an HTML string from the database and needed to change all  s’ to white spaces

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am</p><p>C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;F</p>

so I wanted the change the   to whitespaces, so i can use in a pre element

<pre></pre>

as following

<pre >

    //here i needed to insert the converted string
    //for example
                C              G                 Am          F

    C                 G              F   C/E   Dm   C

</pre>

I need a solution to do this either in PHP, JS / Jquery

Please Help me through out this

I have tried

$nbsp = html_entity_decode(" ");
$s = html_entity_decode("<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am</p>");
$s = str_replace($nbsp, " ", $s);  

I tried This but this replaces all nbsp’s to one white space

Answer

Even inside <pre> tags, HTML tags will be turned into DOM elements and the browsers will collapse multiple spaces into one. Here is an example of this behavior.

<pre>
  <h1>A heading</h1>
  <p>some paragraph</p>
  <table>
    <tr>
      <td>a table</td>
      <td>a table</td>
      <td>a table</td>
      <td>a table</td>
    </tr>
  </table>
</pre>

Also, in order to replace multiple occurrences of the search string, you’ll have to use a regular expression in the first parameter of .replace().

Solution

This uses a rudimentary way to replace HTML tags in the string, but that’s outside the scope for this question. I added it to be able to reproduce your case and be able to provide a solution.

const s = '<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am</p><p>C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;F</p>';

let result = s.replace(/(<p>|<br(.*)>)/gi, "rn")  // replace starting paragraph tags and line break tags with actual line breaks
              .replace(/(</p>)/gi, "n") // replace closing paragraph tags with nothing
              .replace(/(<(.*)>)/gi, "") // discard any other HTML tags
              .replace(/&nbsp;/gi, ' '); // replace non-breaking space entities with actual spaces

document.querySelector('#tabs').innerText = result; // insert

<pre id="tabs">
</pre>