Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.innerText doesn't add \n newlines like browser does #344

Closed
devinellis opened this issue Jan 28, 2022 · 5 comments · Fixed by #574
Closed

.innerText doesn't add \n newlines like browser does #344

devinellis opened this issue Jan 28, 2022 · 5 comments · Fixed by #574
Assignees
@capricorn86
Labels
bug Something isn't working high priority

Comments

@devinellis
Copy link

First, let me say thanks for your work on HappyDOM, I'm really happy with the performance. I'm using it to feed Mozilla's Readability library to extract articles from HTML documents.

Steps to Reproduce

document.body.innerHTML = '<div>The <strong>quick</strong> brown fox</div><div>Jumped over the lazy dog</div>'
document.body.innerText

Returns
The quick brown foxJumped over the lazy dog

Expected (Firefox and Chrome)
The quick brown fox\nJumped over the lazy dog

I verified this behavior in Chrome and Firefox. As far as I can tell, they do it for block level elements.

This is causing things like <li> lists to get merged together. My temporary fix is to append a whitespace to every text, but this still creates runon sentences with no break.

Another inconsistency is how newlines within the HTML are handled:

document.body.innerHTML = '<span>The quick brown fox</span>\n<span>Jumped over the lazy dog</span>'
document.body.innerText

Returns
The quick brown fox\nJumped over the lazy dog

Expected
The quick brown fox Jumped over the lazy dog

Logically, the \n is treated as whitespace and not specifically a newline (i.e. word-wrapped code doesn't mean it should be rendered with the same breaks)
@capricorn86 capricorn86 added bug Something isn't working high priority labels Jan 29, 2022
@devinellis
Copy link
Author

Checking in on this. I just confirmed this is still happening on v3.1.1. It turns out that my workaround is causing some unintended behavior. Maybe my use-case is not very common so no one else has noticed this issue.

@capricorn86
Copy link
Owner

Hi @devinellis! 🙂

Thanks for reporting!

I am not able to reproduce this bug. I have compared Happy DOM with Firefox and I get the same result between them. Am I missing something? 😅

@devinellis
Copy link
Author

Feel free to close. I have switched to using linkedom for my use-case.

@capricorn86
Copy link
Owner

capricorn86 commented Jul 4, 2022 •
edited

Too bad to hear that Happy DOM couldn't help you with your case.

I believe I understand the problem now. I assumed that "innerText" for <body> behaves the same as "innerText" for other elements, but it seems like they behave differently. I tested with a <div> element.

 var div = document.createElement('div');
 
 div.innerHTML = '<div>The <strong>quick</strong> brown fox</div><div>Jumped over the lazy dog</div>';
 document.body.innerHTML =  '<div>The <strong>quick</strong> brown fox</div><div>Jumped over the lazy dog</div>';
 
 // Outputs: "The quick brown fox\nJumped over the lazy dog"
 console.log(document.body.innerText);
 
 // Outputs: "The quick brown foxJumped over the lazy dog"
 console.log(div.innerText);

@capricorn86
Copy link
Owner

capricorn86 commented Jul 6, 2022 •
edited

Actually, it is not the <body> element that behaves different. It should just render it differently if it is connected to the document or not.

@capricorn86 capricorn86 self-assigned this Jul 6, 2022
capricorn86 added a commit that referenced this issue Jul 22, 2022
@capricorn86
#344@trivial: Starts on fixing computed styles.
3e8b855
capricorn86 added a commit that referenced this issue Jul 27, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
949b2b1
capricorn86 added a commit that referenced this issue Aug 8, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
6237ae8
capricorn86 added a commit that referenced this issue Aug 9, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
d613956
capricorn86 added a commit that referenced this issue Aug 10, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
496c47c
capricorn86 added a commit that referenced this issue Aug 11, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
9b6522f
capricorn86 added a commit that referenced this issue Aug 12, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
3d664f7
capricorn86 added a commit that referenced this issue Aug 12, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
ecb0044
capricorn86 added a commit that referenced this issue Aug 17, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
94e7ae2
capricorn86 added a commit that referenced this issue Aug 19, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
d8452e6
capricorn86 added a commit that referenced this issue Aug 22, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
058c6f1
capricorn86 added a commit that referenced this issue Aug 22, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
1cd16c8
capricorn86 added a commit that referenced this issue Aug 22, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
1a7f0e2
capricorn86 added a commit that referenced this issue Aug 23, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
22a17ba
capricorn86 added a commit that referenced this issue Aug 23, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
09c75fc
capricorn86 added a commit that referenced this issue Aug 24, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
3738194
@capricorn86 capricorn86 linked a pull request Aug 24, 2022 that will close this issue
Task/344 innertext doesnt add n newlines like browser does #574
Merged
capricorn86 added a commit that referenced this issue Aug 24, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
4e2c316
capricorn86 added a commit that referenced this issue Aug 25, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
322563b
capricorn86 added a commit that referenced this issue Aug 31, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
fb13f37
capricorn86 added a commit that referenced this issue Aug 31, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
4ca836b
capricorn86 added a commit that referenced this issue Sep 1, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
36575ff
capricorn86 added a commit that referenced this issue Sep 5, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
2790699
capricorn86 added a commit that referenced this issue Sep 6, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
7149821
capricorn86 added a commit that referenced this issue Sep 7, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
a321e54
capricorn86 added a commit that referenced this issue Sep 7, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
b8c2672
capricorn86 added a commit that referenced this issue Sep 8, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
8aff1f9
capricorn86 added a commit that referenced this issue Sep 9, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
b0d14bd
capricorn86 added a commit that referenced this issue Sep 9, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
4ebf7b7
capricorn86 added a commit that referenced this issue Sep 19, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
ca6c2aa
capricorn86 added a commit that referenced this issue Sep 21, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
91bbdf5
capricorn86 added a commit that referenced this issue Sep 22, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
1cea073
capricorn86 added a commit that referenced this issue Sep 28, 2022
@capricorn86
#344@major: Improves the support for CSSStyleDeclaration and window.g…
d1a0bac 
…etComputedStyle(). Improves support for HTMLElement.innerText.
capricorn86 added a commit that referenced this issue Sep 28, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
36aceeb
capricorn86 added a commit that referenced this issue Sep 28, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
606cff8
capricorn86 added a commit that referenced this issue Sep 29, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
2e3bfa5
@smarlhens smarlhens mentioned this issue Sep 30, 2022
Closed
capricorn86 added a commit that referenced this issue Sep 30, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
8ec7322
capricorn86 added a commit that referenced this issue Sep 30, 2022
@capricorn86
#344@trivial: Continues on CSSStyleDeclaration.
a4d24a3
capricorn86 added a commit that referenced this issue Oct 4, 2022
@capricorn86
#344@trivial: Continue on CSSStyleDeclaration.
c881207
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Adds cache to HTMLStyleElement.sheet.
53046fa
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Removes DS_Store file.
efde951
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Adds DS_Store to gitignore.
e95bda0
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Improves readable for the code of HTMLElement.innerText.
481be4f
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Improves readable for the code of HTMLElement.innerText.
7e98e4b
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Improves readable for the code of HTMLElement.innerText.
62288c4
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Removes unused mock file.
6b6ce08
capricorn86 added a commit that referenced this issue Oct 5, 2022
@capricorn86
#344@trivial: Adds test for computed style with the properties displa…
19993dc 
…y and direction.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@capricorn86 capricorn86

Labels
bug Something isn't working high priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Task/344 innertext doesnt add n newlines like browser does capricorn86/happy-dom
2 participants
@devinellis @capricorn86