Replace multiple with multiple whitespace

Question

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 1

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, "\r\n")  // 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>

Answer 2

have you considered using the html pre tag that preserves whitespace. https://www.techonthenet.com/html/elements/pre_tag.php#:~:text=The%20HTML%20tag%20defines,as%20the%20element. Then with javascript or php you could replace instances of   with a regular space.

mytext.replace(' ', ' ');

Answer 3

You need to not only replace   but also remove any html tags, replacing them with non-tag line breaks. To facilitate this, I'm using the DOM. I create an element, inject it with the   data, then loop through the <p> tags, get their innerText and replace the   referencing it with the unicode character it represents \u00a0

const data = "<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 div = document.createElement('div');
div.innerHTML = data;
div.querySelectorAll('p').forEach(p => document.querySelector('#result').append(p.innerText.replace(/\u00a0/g, ' ') + "\n\n"))

pre {
  padding: 10px;
  background: #f0f0f0;
}

<pre id='result'></pre>