Replacing &Nbsp; from JavaScript Dom Text Node

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



Leave a reply



Submit