Could someone look at the following screenshot for me and explain the following:

1. What is going on?
2. How can I programmatically detect it?
3. How can I programmatically fix / get rid of it?

I believe what's happening is I have multiple text nodes in a single pre element... I feel like I read on MDN many years ago that such a thing is possible, but I've never encountered anything like it before now.

jQuery doesn't reveal anything unusual about it via text() or html() (I attempt both in the console as seen in the screenshot)... it simply shows the content of all the text nodes consolidated into a single node.

Not shown is that when I attempt to manually fix this in the console, by doing:

$('pre').text($('pre').text())

Instead of replacing all the text nodes with a single text node with the content of all 3 merged into one, it only replaces the content of the first text node with the content of all 3.

All of this is really confusing me and I can't find any documentation on any of this, so I'd really appreciate it if someone could answer my questions above.

Oh, because I know someone will ask how I did this, the answer is I'm not quite sure what I did. It has something to do with the circular loop between the html and the js of my meteor project, I think:

In my html I have this:

<pre class="editable" contentEditable="true">{{text}}</pre>

And in my javascript I have this:

"input pre": function (event) {
    var newText = $(event.target).text();
    Ideas.update(this._id, {$set: {text: newText}});
}

So meteor is automatically checking for changes to text in my database and putting the latest copy into my pre. It also sees when the user edits the pre and edits the text in the database. Something about doing this somehow, sometimes yields what you see in the picture above (other times it yields other strange behaviors.)

Could someone look at the following screenshot for me and explain the following:

1. What is going on?
2. How can I programmatically detect it?
3. How can I programmatically fix / get rid of it?

I believe what's happening is I have multiple text nodes in a single pre element... I feel like I read on MDN many years ago that such a thing is possible, but I've never encountered anything like it before now.

jQuery doesn't reveal anything unusual about it via text() or html() (I attempt both in the console as seen in the screenshot)... it simply shows the content of all the text nodes consolidated into a single node.

Not shown is that when I attempt to manually fix this in the console, by doing:

$('pre').text($('pre').text())

Instead of replacing all the text nodes with a single text node with the content of all 3 merged into one, it only replaces the content of the first text node with the content of all 3.

All of this is really confusing me and I can't find any documentation on any of this, so I'd really appreciate it if someone could answer my questions above.

Oh, because I know someone will ask how I did this, the answer is I'm not quite sure what I did. It has something to do with the circular loop between the html and the js of my meteor project, I think:

In my html I have this:

<pre class="editable" contentEditable="true">{{text}}</pre>

And in my javascript I have this:

"input pre": function (event) {
    var newText = $(event.target).text();
    Ideas.update(this._id, {$set: {text: newText}});
}

So meteor is automatically checking for changes to text in my database and putting the latest copy into my pre. It also sees when the user edits the pre and edits the text in the database. Something about doing this somehow, sometimes yields what you see in the picture above (other times it yields other strange behaviors.)

• javascript
• jquery
• html
• meteor
• normalize

• I haven't had a moment to actually play with this yet, but I found some documentation on MDN that looks relevant... developer.mozilla/en-US/docs/Web/API/Node/normalize and developer.mozilla/en-US/docs/Web/API/Text – ArtOfWarfare Commented Mar 25, 2015 at 19:45
• Hypothesis: The upper half of the screen shot may be logical from the standpoint that normal HTML ignores white space. The <pre> tag alters this behavior, thus the user-agent will emulate the effect of having multiple lines by paying attention to line breaks. It adds multiple text nodes. What jQuery does to concatenate the text into one string is probably a jQuery thing. – Anthony Rutledge Commented May 15, 2018 at 8:37
• This bit of knowledge may help someone: developer.mozilla/en-US/docs/Web/API/Text – Anthony Rutledge Commented May 15, 2018 at 8:43

1 Answer 1

1. What is going on?

There are multiple text nodes in the pre element.

2. How can I programmatically detect it?

$('pre').contents() will return a list of children of the element, including text nodes. In my case, I'll only ever have text nodes so simply checking if the list has a length greater than 1 will work. If I weren't able to make that assumption, I would have to iterate over the returned list and see if any two consecutive nodes were text nodes. See the documentation from jQuery.

3. How can I programmatically fix / get rid of it?

$('pre')[0].normalize() fixes it. See the documentation on normalize from MDN.