用多个空格替换多个 &nbsp

Question

我从数据库中检索了一个 HTML 字符串，需要将所有  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>

所以我想将 更改为空格，这样我就可以在前置元素中使用

<pre></pre>

如下

<pre >

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

    C                 G              F   C/E   Dm   C

</pre>

我需要在 PHP、JS/Jquery 中执行此操作的解决方案

请帮我解决这个问题

我试过了

$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);  

我试过这个，但这会将所有 nbsp 替换为一个空格

Answer 1

即使在<pre> 标签内，HTML 标签也会变成 DOM 元素，浏览器会将多个空格合并为一个。这是此行为的一个示例。

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

另外，为了替换多次出现的搜索字符串，您必须在.replace() 的第一个参数中使用正则表达式。

解决方案

这使用了一种基本的方法来替换字符串中的 HTML 标记，但这超出了这个问题的范围。我添加它是为了能够重现您的案例并能够提供解决方案。

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

您是否考虑过使用保留空格的 html pre 标记。 https://www.techonthenet.com/html/elements/pre_tag.php#:~:text=The%20HTML%20tag%20defines,as%20the%20element。 然后使用 javascript 或 php，您可以将   的实例替换为常规空格。

mytext.replace(' ', ' ');

Answer 3

您不仅需要替换 ，还需要删除所有html标签，用非标签换行符替换它们。为了方便这一点，我使用了 DOM。我创建了一个元素，用  数据注入它，然后循环遍历<p> 标签，获取它们的innerText 并将引用它的  替换为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>