Question 240550 in Html Question posted in
Some basic documentation can be found here.

Html – chrome javascript renders text differently with newlines

My use case: I select text on any website on the internet I want the selected text in a web page to be divided into paragraphs, so I use two 'n' to get the number of paragraphs in a web page. So basically I want the number of paragraphs on a website.

I have text with double newlines in it, but javascript client side remove some newlines while rendering. For example, this text something goes nn like this nn and but browser gives wrong result renders as something goes like this and but browser gives wrong result, so when I copy the text and paste somewhere I miss the newlines.

My Use case: I want the text on a web page to be divided into paragraphs, So I select text with the mouse and do this: "entire web page text selection".split("nn)", I don’t get the newlines, it seems like javascript or HTML or browser removes n characters.

I get different results in nodejs environment and in a browser environment, I have successfully wasted more than a couple of hours on this 🙁

In nodejs, new line n chars in string.split gives the correct result, but it gives the wrong result in javascript (client side)

Nodejs,

const bodyText = "something goes nn like this nn and but browser gives wrong result when I select this text on a rendered web page"  

console.log(bodyText.split("nn").length) //3

In browser js, it fails

const bodyText = "something goes nn like this nn and but browser giving wrong results when I select this text on a rendered web page "//rendered text on webpage removes n

console.log(bodyText.split("nn").length) //1

How can I achieve the same result, any idea?
Thank you very much!

TL;DR: I basically select text on any website to know how many paragraphs are in the content, so I'm clueless now.

Tags:

2

Answers


  1. 0

    There doesn’t seem to be an issue.

    Using nodejs v18.14.2 and the exact code you provided, the output is 3.

    In both chrome and firefox’s console, the output is also 3.

    Login or Signup to reply.
  2. 0

    The issue you are facing because of differences in how line breaks works in nodejs and browser js.
    Node.js treats consecutive newlines as separate elements in the resulting array.
    However, in browser JavaScript, HTML treats consecutive newlines as a single whitespace character.
    To achieve consistent behavior across both Node.js and browser, you might want to consider using a different delimiter that works consistently in both scenarios

    const bodyText = "something goes nn like this nn and but browser gives wrong results";

// Use a custom delimiter 
const delimiter = "|||";


const newBodyText = bodyText.replace(/nn/g, delimiter);

// Split the newBodyText using the custom delimiter
const paragraphs = newBodyText.split(delimiter);

console.log(paragraphs.length); // 3
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search