How to extract text from an HTML node and maintain the correct space formatting with JavaScript?

I need to get the text value inside of a div. You can think of it like a text area, where you can do like this:

let inputArea = document.getElementById("text-area");

let text = inputArea.value;



text

// Expected result:

// Hello

//

// Hello

//

// Hello

//

// Hello

Unfortunately, I don't have a text area and I can't do that. So what here's what I did:

(1) Get the HTML node where I need to extract the text (var bodyHtml..)

(2) Convert the HTML node to string (calling extractStringFromNode()..)

(3) Extract the string out of the returned string (calling extractContentFromString()..)

My problem is that I lose the "text formatting". The let text (code above) contains the value of the inputArea with the proper formatting. I lose this when I try to reproduce it using my implementation (code below).

What is the right way to solve this?

var OriginalText;



function parseText(event) {

                // get text

                var bodyHtml = event.composeView.getBodyElement();

                var stringBodyHtml = extractStringFromNode(bodyHtml);

                console.log(stringBodyHtml)

                var text = extractContentFromString(stringBodyHtml);

                OriginalText = text;

                console.log(text);



                // now parse it 

                format(text);

            }





// extract text from html

        function extractContentFromString(s) {

            var span = document.createElement('span');

            span.innerHTML = s;

            return span.textContent || span.innerText;

        };



        // from html node to string



        function extractStringFromNode ( node ) {

            var tmpNode = document.createElement( "div" );

            tmpNode.appendChild( node.cloneNode( true ) );

            var str = tmpNode.innerHTML;

            tmpNode = node = null; // prevent memory leaks in IE

            return str;

        }



        // Expected result: HelloHelloHelloHello

asked Dec 31 '18 at 20:48

leonardofed

342113

You "lose" your formatting - what formatting? You're trying to pull text from a Div, right?

– zfrisch
Dec 31 '18 at 20:54

Ie. I cannot distinguish new paragraphs.

– leonardofed
Dec 31 '18 at 20:56

@zfrisch looks like similar to this: stackoverflow.com/questions/47811878/…

– leonardofed
Dec 31 '18 at 20:57

add a comment |

I need to get the text value inside of a div. You can think of it like a text area, where you can do like this:

let inputArea = document.getElementById("text-area");

let text = inputArea.value;



text

// Expected result:

// Hello

//

// Hello

//

// Hello

//

// Hello

Unfortunately, I don't have a text area and I can't do that. So what here's what I did:

(1) Get the HTML node where I need to extract the text (var bodyHtml..)

(2) Convert the HTML node to string (calling extractStringFromNode()..)

(3) Extract the string out of the returned string (calling extractContentFromString()..)

What is the right way to solve this?

var OriginalText;



function parseText(event) {

                // get text

                var bodyHtml = event.composeView.getBodyElement();

                var stringBodyHtml = extractStringFromNode(bodyHtml);

                console.log(stringBodyHtml)

                var text = extractContentFromString(stringBodyHtml);

                OriginalText = text;

                console.log(text);



                // now parse it 

                format(text);

            }





// extract text from html

        function extractContentFromString(s) {

            var span = document.createElement('span');

            span.innerHTML = s;

            return span.textContent || span.innerText;

        };



        // from html node to string



        function extractStringFromNode ( node ) {

            var tmpNode = document.createElement( "div" );

            tmpNode.appendChild( node.cloneNode( true ) );

            var str = tmpNode.innerHTML;

            tmpNode = node = null; // prevent memory leaks in IE

            return str;

        }



        // Expected result: HelloHelloHelloHello

asked Dec 31 '18 at 20:48

leonardofed

342113

You "lose" your formatting - what formatting? You're trying to pull text from a Div, right?

– zfrisch
Dec 31 '18 at 20:54

Ie. I cannot distinguish new paragraphs.

– leonardofed
Dec 31 '18 at 20:56

@zfrisch looks like similar to this: stackoverflow.com/questions/47811878/…

– leonardofed
Dec 31 '18 at 20:57

add a comment |

I need to get the text value inside of a div. You can think of it like a text area, where you can do like this:

let inputArea = document.getElementById("text-area");

let text = inputArea.value;



text

// Expected result:

// Hello

//

// Hello

//

// Hello

//

// Hello

Unfortunately, I don't have a text area and I can't do that. So what here's what I did:

(1) Get the HTML node where I need to extract the text (var bodyHtml..)

(2) Convert the HTML node to string (calling extractStringFromNode()..)

(3) Extract the string out of the returned string (calling extractContentFromString()..)

What is the right way to solve this?

var OriginalText;



function parseText(event) {

                // get text

                var bodyHtml = event.composeView.getBodyElement();

                var stringBodyHtml = extractStringFromNode(bodyHtml);

                console.log(stringBodyHtml)

                var text = extractContentFromString(stringBodyHtml);

                OriginalText = text;

                console.log(text);



                // now parse it 

                format(text);

            }





// extract text from html

        function extractContentFromString(s) {

            var span = document.createElement('span');

            span.innerHTML = s;

            return span.textContent || span.innerText;

        };



        // from html node to string



        function extractStringFromNode ( node ) {

            var tmpNode = document.createElement( "div" );

            tmpNode.appendChild( node.cloneNode( true ) );

            var str = tmpNode.innerHTML;

            tmpNode = node = null; // prevent memory leaks in IE

            return str;

        }



        // Expected result: HelloHelloHelloHello

asked Dec 31 '18 at 20:48

leonardofed

342113

I need to get the text value inside of a div. You can think of it like a text area, where you can do like this:

let inputArea = document.getElementById("text-area");

let text = inputArea.value;



text

// Expected result:

// Hello

//

// Hello

//

// Hello

//

// Hello

Unfortunately, I don't have a text area and I can't do that. So what here's what I did:

(1) Get the HTML node where I need to extract the text (var bodyHtml..)

(2) Convert the HTML node to string (calling extractStringFromNode()..)

(3) Extract the string out of the returned string (calling extractContentFromString()..)

What is the right way to solve this?

var OriginalText;



function parseText(event) {

                // get text

                var bodyHtml = event.composeView.getBodyElement();

                var stringBodyHtml = extractStringFromNode(bodyHtml);

                console.log(stringBodyHtml)

                var text = extractContentFromString(stringBodyHtml);

                OriginalText = text;

                console.log(text);



                // now parse it 

                format(text);

            }





// extract text from html

        function extractContentFromString(s) {

            var span = document.createElement('span');

            span.innerHTML = s;

            return span.textContent || span.innerText;

        };



        // from html node to string



        function extractStringFromNode ( node ) {

            var tmpNode = document.createElement( "div" );

            tmpNode.appendChild( node.cloneNode( true ) );

            var str = tmpNode.innerHTML;

            tmpNode = node = null; // prevent memory leaks in IE

            return str;

        }



        // Expected result: HelloHelloHelloHello

javascript

asked Dec 31 '18 at 20:48

leonardofed

342113

asked Dec 31 '18 at 20:48

leonardofed

342113

asked Dec 31 '18 at 20:48

leonardofed

342113

asked Dec 31 '18 at 20:48

leonardofed

342113

asked Dec 31 '18 at 20:48

leonardofed

342113

You "lose" your formatting - what formatting? You're trying to pull text from a Div, right?

– zfrisch
Dec 31 '18 at 20:54

Ie. I cannot distinguish new paragraphs.

– leonardofed
Dec 31 '18 at 20:56

@zfrisch looks like similar to this: stackoverflow.com/questions/47811878/…

– leonardofed
Dec 31 '18 at 20:57

add a comment |

You "lose" your formatting - what formatting? You're trying to pull text from a Div, right?

– zfrisch
Dec 31 '18 at 20:54

Ie. I cannot distinguish new paragraphs.

– leonardofed
Dec 31 '18 at 20:56

@zfrisch looks like similar to this: stackoverflow.com/questions/47811878/…

– leonardofed
Dec 31 '18 at 20:57

You "lose" your formatting - what formatting? You're trying to pull text from a Div, right?

– zfrisch
Dec 31 '18 at 20:54

Ie. I cannot distinguish new paragraphs.

– leonardofed
Dec 31 '18 at 20:56

@zfrisch looks like similar to this: stackoverflow.com/questions/47811878/…

– leonardofed
Dec 31 '18 at 20:57

add a comment |

1 Answer
1

active

oldest

votes

Use the CSS property white-space and set it to pre. This will preserve line breaks, however, you must place it in every place you want to have the text with similar spacing.

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991303%2fhow-to-extract-text-from-an-html-node-and-maintain-the-correct-space-formatting%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Use the CSS property white-space and set it to pre. This will preserve line breaks, however, you must place it in every place you want to have the text with similar spacing.

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

add a comment |

Use the CSS property white-space and set it to pre. This will preserve line breaks, however, you must place it in every place you want to have the text with similar spacing.

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

add a comment |

Use the CSS property white-space and set it to pre. This will preserve line breaks, however, you must place it in every place you want to have the text with similar spacing.

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

Use the CSS property white-space and set it to pre. This will preserve line breaks, however, you must place it in every place you want to have the text with similar spacing.

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

let div = document.querySelector("div"); 

//this div has CSS styling white-space: pre



span = document.body.appendChild( document.createElement("span") );

//this span does not



span.textContent = div.textContent;

//div will be "formatted" with line breaks. Span will not.

div { 

white-space: pre;

}

<div>This

Is

A

Demo

</div>

<hr/>

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

answered Dec 31 '18 at 21:01

zfrisch

4,55711024

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

add a comment |

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

makes sense, but <div>This Is A Demo </div> it's not my case. I have nested <span> inside the outer div.

– leonardofed
Dec 31 '18 at 21:08

Can you grab that span instead of the div? It's the same concept. Just change the selector to match your span.

– zfrisch
Dec 31 '18 at 21:18

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk