jquery - How to replace   with whitespace in Javascript? - Stack Overflow

admin管理员组

文章数量:1344319

I want to replace ' ' in my code with simple whitespaces " ". These things aren't actually the same.

How can I do this?

JsFiddle

This code won't work.

HTML

<p>No Space</p>
<p>&nbsp;1 Space</p>
    <p>&nbsp;&nbsp;2 Spaces</p>
        <p>&nbsp;&nbsp;&nbsp;3 Spaces</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;4 Spaces</p>

JS

$(document).ready(function() {
    $('p').each(function(){
      $(this).html($(this).html().replace(/ /gi," "));
    });
});

I want to replace ' ' in my code with simple whitespaces " ". These things aren't actually the same.

How can I do this?

JsFiddle

This code won't work.

HTML

<p>No Space</p>
<p>&nbsp;1 Space</p>
    <p>&nbsp;&nbsp;2 Spaces</p>
        <p>&nbsp;&nbsp;&nbsp;3 Spaces</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;4 Spaces</p>

JS

$(document).ready(function() {
    $('p').each(function(){
      $(this).html($(this).html().replace(/ /gi," "));
    });
});

• javascript
• jquery

Share Improve this question Follow asked Oct 21, 2015 at 20:59 Alex NikolskyAlex Nikolsky 2,17966 gold badges2323 silver badges3838 bronze badges 3

• 2 This sounds like an XY problem. Is there a specific reason you need to do this? It's obviously not for UI reasons, as   is encoded to whitespace by default. – Rory McCrossan Commented Oct 21, 2015 at 21:01
• @RoryMcCrossan That's my specific reason. Check out the way it's being displayed. Note, that text is identical in both columns, but the only difference is that the first column has ' ' instead of whitespaces. – Alex Nikolsky Commented Oct 21, 2015 at 21:04
• 1 this is working in your fiddle with Chrome... the &nbsps are being replaced with ` ` and each item in the list is showing up as if there was one space. – pherris Commented Oct 21, 2015 at 21:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

If you look at the source code, after jQuery replaces NonBreakingSPaces   with " ":

<p>No Space</p>
<p> 1 Space</p>
<p>  2 Spaces</p>
<p>   3 Spaces</p>
<p>    4 Spaces</p>

so the actual space characters are present!!.

Why than the spaces do not show up in the document?

The main difference between nested spaces or spaces before a literal string character are eaten by the brower it's mainly an old rule to prevent Inaccurate content spacing created by sloppy editorial, but not only that! imagine that all the spaces and newlines that you see inside an unminified (standard) HTML code - showed up in the result! You'd be forced to write oneliners.

So if you're not using a word wrap style white-space: pre-wrap; or an element like <pre> that will PREserve your literal spaces the browser will clean the rendered content spaces for you.

<pre>
<p>No Space</p>
<p> 1 Space</p>
<p>  2 Spaces</p>
<p>   3 Spaces</p>
<p>    4 Spaces</p>
</pre>

Using pre-wrap to preserve literally spaces:

body{ white-space: pre-wrap; }

<p>No Space</p>
<p> 1 Space</p>
<p>  2 Spaces</p>
<p>   3 Spaces</p>
<p>    4 Spaces</p>

Or you'll use exactly what you're trying to remove:  

https://en.wikipedia/wiki/Non-breaking_space
https://en.wikipedia/wiki/Standard_Generalized_Markup_Language
https://developer.mozilla/en-US/docs/Web/CSS/white-space
https://developer.mozilla/en-US/docs/Web/CSS/word-break https://developer.mozilla/en-US/docs/Web/CSS/word-wrap

Your code is working fine, test this by replacing " " with "s" or some other letter to see how the nbsp is being replaced.

Any number of spaces in paragraph tags only count as one space.

Replace the <p> tag with a <span>, and you will see your replacement has worked.

http://jsfiddle/93jmn65f/

HTML:

<p>No Space</p>
<span>&nbsp;&nbsp;&nbsp;&nbsp;4 Spaces</span>
    <p>&nbsp;&nbsp;2 Spaces</p>
        <p>&nbsp;&nbsp;&nbsp;3 Spaces</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;4 Spa     ces</p>

JS:

$(document).ready(function() {
    $('p').each(function(){
      $(this).html($(this).html().replace(/ /gi,"s"));
    });
});

Use a Regex on the textContent :

$(document).ready(function() {
  var re = new RegExp(String.fromCharCode(160), "gi");
  $('p').each(function(){
    $(this).html($(this)[0].textContent.replace(re, " "));
  });
});

See fiddle

What may be happening is that the literal   in the javascript is being decoded before the JS is piled. One way to cure this would be to put it into a separate .js file instead of inline in the HTML. Another would be to try representing it as / /.

(By the way, I had to enter " " into this textbox to show " " above... and I had to double the &s to illustrate that here. But I didn't have to do that inside the code ticks. Just an oddity of SO.)

本文标签： jqueryHow to replace ampnbsp with whitespace in JavascriptStack Overflow