1

I'm a beginner in JavaScript and I've been working on this project which uses regular expressions to find and replace particular strings on a text.

I'd say it's working pretty well, but when I click the 'go' button in order to replace the string, it does so, but takes me to a new page which only contains the replaced string. The console says something about "Quirks mode"? not sure what that is.

Here's my code:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>findNreplace</title>
</head>
<body>
    <textarea name="input" id="inputText">
    </textarea>
    <p id="projectedText"></p>
    <label for="find">Find: </label>
    <input type="text" id="find">
    <label for="replace">Replace: </label>
    <input type="text" name="" id="replace">
    <input type="button" value="Go" id="commit">
    <script src="script.js"></script>
</body> 
</html>



document.getElementById("commit").onclick=findNreplace; //set up go button


//variables
var textToShow = document.getElementById("inputText");
var projected = document.getElementById("projectedText");
var toFind = document.getElementById("find");
var toReplace = document.getElementById("replace"); 

// set up text area to project the input into the paragraph
textToShow.addEventListener('input',updateValue);

function updateValue(text) {
    projected.textContent=text.target.value;
}

// replace function
function findNreplace() {
    var str = projected.innerText;
    var regex = new RegExp(toFind.value, 'g')
    var found = projected.innerText.match(regex);
    document.write(str.replace(regex.source, toReplace.value))
    console.log(regex.source);
}
downmath
  • 147
  • 5

1 Answers1

1

;TLDR

Do not use document.write outside of a tutorial exercise to insert content into the HTML input stream during page load.

document.write, .open and .close

During page load, when the HTML parser is processing the HTML input stream, the document is open, and you can use document.write to insert content into the input stream at its current position.

When the page has finished loading from its input stream, the document is automatically closed.

If you call document.write on a closed document it will automatically open the document for you. This opening the document again resets the document to an empty state - of having no content. This is why you only see what you have written.

If the document is opened by document.write it will stay open until you explicitly call document.close. This is why if the browser displays a page loading indicator, it will remain active until document.close is called.

In most cases document.write is used in beginners' JavaScript programming course so they see results of example tasks quickly. It has a place in inserting HTML input during page load but has its limitations1.

Notes

1document.write can be used during page load to dynamically insert script tags that need to be loaded synchronously. Browsers sometimes ignore such insertions, but inserting scripts from the same domain as the HTML page is allowed.

See also Why is document.write considered a "bad practice"?

Quirks mode

The quirks mode warning is being issued because the HTML document does not start with a document type declaration. Insert the following line,

<!DOCTYPE html>

as the first line of HTML source to have the page parsed according to standards.

Appending HTML to a document.

Element.insertAdjacentHTML() invokes the HTML parser on a markup string and allows you to append HTML to a specified element.

Here's an example of using it to append HTML to a page, after document.body has been created, without using document.write:

// bodyAppend - append HTML string to body

function bodyAppend( htmlString) {
   document.body.insertAdjacentHTML("beforeend", htmlString);
}

// and test

bodyAppend("<p style='color:green'>An appended paragraph</p>");
<h1>Page Header</h1>

Some existing page content.

  • 'insertAdjacentHTML' can't be used in the head section of a page - document.body has not been created and is still set to null,

  • bodyAppend presented above is intended for beginners - it's just one example of a particular technique. Please read the linked documentation to understand the syntax used, and do a search for "how to modify the DOM in JavaScript" to learn more about the scope of the topic.

traktor
  • 17,588
  • 4
  • 32
  • 53