aruneshmathur/dark-patterns

Decide between textNode and innerText for getting element text

gunesacar opened this issue · 2 comments

gunesacar commented

There are different ways to get text from elements: innerText takes style into account and doesn't contain hidden or invisible text. textContent retrieves all text (hidden or not) and replace newline characters with space. Other differences are explained here.

For the following case (red numbers updated randomly), innerText seem to work better since textContent contains placeholder numbers (8) that are hidden from the user:
URL: https://loveandlinen.co/collections/womens-graphic-tees/products/zihuatanejo-mexico-womens-fit-t-shirt:

3333

innerText:

HURRY! Only 
3
3
4
 left!

textContent:
HURRY! Only 83834 left!

OuterHTML:

<div id="products-available" style="color: rgb(0, 0, 0); margin-top: 10px;">
<img src="https://window-shoppers.azurewebsites.net/Images/hurry-left.png" class="ws-message-icon">
<span><span style="color: #030303">HURRY! Only <strong style="color: #DB1D1D"><span class="glowing odometer odometer-auto-theme odometer-animating-down odometer-animating">
<div class="odometer-inside"><span class="odometer-digit">
<span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">
<span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<div class="odometer-value odometer-last-value odometer-first-value">3</div></span></span></span></span><span class="odometer-digit">
<span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">
<span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<div class="odometer-value odometer-first-value">3</div>
<div class="odometer-value odometer-last-value">4</div></span></span></span></span></div></span></strong> left!</span></span></div>

innerText

HOT! 
1
1
1
 sold in the last hour!

textContent:
HOT! 818181 sold in the last hour!

OuterHTML:

<div id="products-sold" style="color: rgb(0, 0, 0); margin-top: 10px;">
<img src="https://window-shoppers.azurewebsites.net/Images/hot-sold.png" class="ws-message-icon">
<span>
<span style="color: #030303">HOT! <strong style="color: #DB1D1D">
<span class="glowing odometer odometer-auto-theme">
<div class="odometer-inside"><span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">1</span></span></span></span></span>
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">1</span></span></span></span></span>
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">1</span></span></span></span></span></div></span></strong> sold in the last hour!</span></span></div>

innerText:
114 others are viewing this right now!

textContent:
114 others are viewing this right now!

OuterHTML:

<div id="people-looking" style="color: rgb(0, 0, 0); margin-top: 10px;">
<img src="https://window-shoppers.azurewebsites.net/Images/people-looking.png" class="ws-message-icon">
<span><span style="color: #030303"><strong style="color: #DB1D1D">
<span class="glowing">114</span></strong> others are viewing this right now!</span></span></div>
aruneshmathur commented

Looks like we're sticking with innerText? I can write a routine that replaces non-trailing newlines within the text and we can call it everywhere.