With Javascript, how to replace words or senteces in textarea without broken layout and paragraph(structure of article)?

Question

I want to create a program which fixes spell error, sentence structure error. The problem is, when I execute this code, the article which was inserted into text area..lose its own paragraph structure with its original lay out. Yes, it is broken. So, How to replace texts in text area while keeping the article's original layout with paragraph structure?Anyway to maintain its own shape? (to check whether my words are correct or not, just simply paste the sample article below into the text area then execute it. You'll see the article's paragraph layout is broken.)

-Thi wil be disp in a monosp fon. Th frst fou spac wil be striped of, bt al othe whites wil be prese. Markdo ad HTL ae tur of in cod blo:-

      <!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<textarea id="myDiv" rows="100" cols="100"></textarea>
<button onclick="replaceText()">correct them!</button>

<script language="javascript">

function replaceText(){
var theDiv = document.getElementById("myDiv");
var theText = theDiv .innerHTML;

// Replace words
theText = theText.replace(/fineaple/gi, "pineapple");
theText = theText.replace(/terminater/gi, "terminator");
theText = theText.replace(/testacl/gi, "testicle");
theText = theText.replace(/sting/gi, "string");
theText = theText.replace(/watarmalon/gi, "watermelons");
theText = theText.replace(/th/gi, "the");
theText = theText.replace(/thi/gi, "this");
theText = theText.replace(/wil/gi, "will");
theText = theText.replace(/b/gi, "be");
theText = theText.replace(/disp/gi, "displayed");
theText = theText.replace(/monosp/gi, "mono spaced");
theText = theText.replace(/fon/gi, "font");
theText = theText.replace(/frst/gi, "first");
theText = theText.replace(/fou/gi, "four");
theText = theText.replace(/spac/gi, "spaces");
theText = theText.replace(/striped /gi, "stripped");
theText = theText.replace(/of/gi, "off");
theText = theText.replace(/bt/gi, "but");
theText = theText.replace(/al/gi, "all");
theText = theText.replace(/othe/gi, "other");
theText = theText.replace(/whites/gi, "white space");
theText = theText.replace(/prese/gi, "preserved");
theText = theText.replace(/markdo/gi, "markdown");
theText = theText.replace(/ad/gi, "and");
theText = theText.replace(/htl/gi, "html");
theText = theText.replace(/ae/gi, "are");
theText = theText.replace(/tur/gi, "turned");
theText = theText.replace(/cod/gi, "code");
theText = theText.replace(/blo/gi, "blocks");


theDiv.innerHTML = theText;
}

</script>
</body>
</html>

I don't understand what you mean... there's no structure here. It's just plain text. — Christopher Schneider, Oct 13 '16 at 20:08
I mean, the fixed article's paragraph(line breaks, spaces etc...) — newhistory, Oct 13 '16 at 20:10
The code you've shown wouldn't replace any line breaks or spaces as far as I can tell. There aren't any line breaks in the example you've provided. — Christopher Schneider, Oct 13 '16 at 20:13
`textarea`s don't preserve formatting if you're copying text, so it won't work like you want. — Heretic Monkey, Oct 13 '16 at 20:17

With Javascript, how to replace words or senteces in textarea without broken layout and paragraph(structure of article)?

0 Answers0