Replacing from javascript dom text node
This is much easier than you're making it. The text node will not have the literal string " "
in it, it'll have have the corresponding character with code 160.
function replaceNbsps(str) {
var re = new RegExp(String.fromCharCode(160), "g");
return str.replace(re, " ");
}
textNode.nodeValue = replaceNbsps(textNode.nodeValue);
UPDATE
Even easier:
textNode.nodeValue = textNode.nodeValue.replace(/\u00a0/g, " ");
How to replace all blank space with   while ignoring html tags
The best way that I can think of is to look for text nodes in the element. You'll need to call the function recursively until there are no more text nodes. Here is some example code to get you started.
function replaceText(element) {
for (let childNode of element.childNodes) {
if (childNode.nodeType === Node.TEXT_NODE) {
childNode.data = ' ' + childNode.data.trim().replace(/ /g, '\u00a0') + ' '
continue
}
// Recursively replace text for child node
replaceText(childNode)
}
}
<!DOCTYPE html>
<html>
<body>
<div id='parent'>
Lorem ipsum
<span id='element'>
<em id='child'>dolor sit amet</em>
</span>
</div>
<button onclick='replaceText(document.getElementById("parent"))'>Change with nbsp</button>
</body>
</html>
how to remove   by javascript
Without replacing the malformed
you can replace the innerHTML of each node
var options = document.getElementsByTagName('option')
for (index = 0; index < options.length; ++index) {
options[index].innerHTML = options[index].innerHTML.replace(/\ /g, '');
}
working example: https://jsfiddle.net/2h6hqc0g/
replace the space between the nodes with the
As someone pointed out, you should not use regular expressions to parse html, it is too complex in general (Here there's a nice discussion).
Also, you are missing a closing tag for your last div, it should be :
...</div></html>
Finally, if you still want to use regex, you could try to find '>\s+<' and replace with '>&npsp<' to replace spaces between different tags.
It is much more difficult replacing spaces within tags, i think you really should avoid it.
replacing spaces with
$('p').contents().filter(function(){
return this.nodeType == 3 // Text node
}).each(function(){
this.data = this.data.replace(/ /g, '\u00a0');
});
DEMO
Replacing text in TextNode with new DOM node based on regular expression
After many considerations, this is how I solved it:
if (match !== null && match.length > 0) {
var parentNode = node.parentNode;
var nodes = [];
var textString = value;
var i = 0;
for (let entry of match) {
var startOffset = node.nodeValue.indexOf(entry[0]);
var endOffset = startOffset + entry[0].length;
var length = startOffset - i;
if (length > 0) {
var str = textString.substr(i, length);
var textNode = document.createTextNode(str);
parentNode.insertBefore(textNode, node);
}
var newNode2 = document.createElement("span");
newNode2.setAttribute("ko-text", entry[1]);
parentNode.insertBefore(newNode2, node);
nodes.push(newNode2);
i = endOffset;
}
var length = textString.length - i;
if (length > 0) {
var str = textString.substr(i, length);
var textNode = document.createTextNode(str);
parentNode.insertBefore(textNode, node);
}
parentNode.removeChild(node);
return nodes;
}
It can certainly be improved.
Replace multiple   with multiple whitespace
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>
How to replace with whitespace in Javascript?
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>
Related Topics
Replace All Spaces in a String with '+'
How to Access Google Sheet Spreadsheets Only with JavaScript
The Preferred Way of Creating a New Element with Jquery
How to Join Two JavaScript Objects, Without Using Jquery
External Template in Underscore
Keycode Values for Numeric Keypad
How to Test If a Letter in a String Is Uppercase or Lowercase Using JavaScript
Why Do Arrow Functions Not Have the Arguments Array
$Http.Get(...).Success Is Not a Function
Reactjs Syntheticevent Stoppropagation() Only Works with React Events
Capture Click on Div Surrounding an Iframe
Orderby Multiple Fields in Angular
How to Persist a Es6 Map in Localstorage (Or Elsewhere)
What Does the at Symbol (@) Do in Es6 JavaScript? (Ecmascript 2015)
Difference Between Dot Notation and Bracket Notation in JavaScript
Passing Variables to the Next Middleware Using Next() in Express.Js