We Keep Coding

How to remove HTML from scripts?

So, I have a script with both HTML and javascript inside:
<script>
<br>
window.onload = myFunction;
<br>
function myFunction() {
// Do something
}
<br>
</script>
Obviously, the HTML dont work, but can I remove the HTML tags in scripts somehow? With the javascript code still working. (and not by just going into the code and removing the HTML myself). Is there a way to make the HTML go away or be invisible to the script?
(I've tried just commenting it out with the "< ! - -" and "- - >" but it doesn't work)
Edit: the reason I'm wondering is because I have a weird coding teacher... and he told me you could do stuff like that but I can't get it to work. So I just want to know if it's actually possible.

Commenting the code using javascript comment tags /*
<script>
/*
<br>
window.onload = myFunction;
<br>
*/
function myFunction() {
// Do something
}
<br>
</script>

Loading iframe with content in textbox

I have made a textbox and an iframe in the same html. I want to load the 'html' rendered from textbox into html. I am using javascript button click event, but nothing is getting rendered. Pls help, I cant find where I am making mistake!
HTML:
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>
Javascript:
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').innerHTML = x;
}
Can someone help, what's wrong ?

Try setting src of iframe to data URI representation of textarea value x
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').src = "data:text/plain," + x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>

Just replace
document.getElementById('display').innerHTML = x;
with
document.getElementById('display').contentWindow.document.body.innerHTML = x

You can't manipulate an iframe with Javascript (or jQuery) because the iframe is essentially a separate webpage. This is for security purposes, to prevent one website from embedding a malicious script into an iframe that can target the host page. There is no way around it, as far as I know. Generally it's not good practice to use iframes.

I was browsing the answers for the same task. Well the accepted answer does help a little but the main task is to render "HTML". It works using the srcdoc attribute of the iframe tag.
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').srcdoc = x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
<!-- Comment is not rendered -->
Hello World!
</textarea>
<iframe id="display"></iframe>

jQuery: Preserve user-inputted line breaks in <textarea>

I've been scouring Google and SO for hours but can't seem to find an answer to this for the life of me!
All I want to do is preserve the line breaks entered into a <textarea> element by the user, to post the content via a jQuery $.ajax() call. If I simply submit the form to a page as usual, this works, but I've been told by my boss to use REST/AJAX.
Many, many posts on SO and across the net in general mention replacing \n's with <br />'s, or using white-space: pre-wrap; in the element's CSS. These solutions do not work for me as the line breaks simply don't show up in Chrome Developer Tools.
Code snippet:
<form id="addPostForm" role="form" method="post" action="/blog">
<div class="form-group">
<textarea rows="5" id="postBody" name="postBody"></textarea>
...more input controls
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<script type="text/javascript">
$(document).on('submit', '#addPostForm', function() {
var postBody = $(this)[0].postBody.value;
...more code
});
</script>
When I enter e.g.:
"This is the first paragraph.
And here is another.
And yet another."
The postBody variable's value is:
"This is the first paragraph. And here is another. And yet another."
This is driving me crazy! Surely this shouldn't be as hard as it seems to be!
P.S. I don't think it should make a difference, but just in case anyone is wondering, I'm using Python/Pyramid, Jinja2 and Bootstrap 3 for this project.

Use this in JS
$("input[type=submit]").click(function(){
$.ajax({
type: "POST",
url: "yoururl",
data: $("#addPostForm").serialize()
(...)
});
});
In your server side code you can get POST value postBody with original spaces.

It would appear to me that this problem stems from the Chrome Dev Tools stripping the line breaks. Change the tool settings, or try something else like firebug.

Try splitting the lines by '\n' (yes I have tested this) and rejoin them with tags, check this out:
$('textarea').val().split('\n')
put this in your onclick function and set a breakpoint on it if you are using Chrome, it splits the lines into an array. if you join them with
.join('<br>')
you should be good to go.

Oops sorry for wasting your time, it was as simple as using $('#postBody').val() instead of $(this)[0].postBody.value. Thanks anyway to all commenters and answerers!

Quotes issue in Javascript

I want to refresh an img element within a div every 5 seconds that would indicate whether the user is connected to the internet or not connected. If the user is connected, it will display an image online, but if the user is offline, a local image will display.
However, I cannot get around this quote problem. I even tried the "&-quot;" thing (without the dash) and it still will not work. Here is the code:
<script type="text/javascript">
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
document.getElementById("test").innerHTML = "<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">";
}
</script>
<div id=wifi>
<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">
</div>
I do not have the desire to use jQuery or Ajax or any server-side languages because this is all on a local machine.

You can escape those double quotes like this:
document.getElementById("this").innerHTML = "<img id=\"this\" src=\"http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png\" onerror=\"this.src='nowifi.png'\">";
By typing \" you're telling the JavaScript that you want to insert a double quote inside your string. The other option you have is to use single quotes instead. (I've changed your getElementById from 'test' to 'this' since your HTML has no 'test' as Id)
Also, you shouldn't call a function using a string as you did on refreshDiv. Instead you should call its name like this:
window.setInterval(refreshDiv, 5000);

You should use a hierarchy of single quotes and double quotes. Using double quotes under double quotes makes the JS think is a combination of strings. But it fails without the operators.
<script type="text/javascript">
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
document.getElementById("test").innerHTML = '<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">';
}
</script>
<div id=wifi>
<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">
</div>
Apart from that rather than checking every 5 seconds I would suggest going and using online and offline events of browser - which then saves your code from having setInterval kind of stuff.

In JavaScript, you can use single-quotes or double-quotes. For your case, you should put the string containing the div in single-quotes and have the HTML attributes within that string using double-quotes. However, it looks like you have a few other mistakes in your code anyway. Try this:
<img id="image" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="error">
with the following in your Javascript:
var theImage = document.getElementById('image');
function error() {
theImage.src='nowifi.png';
}
function refreshDiv(){
theImage.innerHTML = '<img id="image" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png"
onerror="error">';
}
setInterval(refreshDiv, 5000);

Regular Express issue - javascript

I am trying to replace a text in javascript using a regular expression like following [example of what I am trying to do]:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\""+message+"\");'>New</div>");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
This is a sample code of what I am trying to do in a large application. Our script is injected in thrid party html pages, so we dont have control over the html.
If you run this code, you will see that the text appears to be broken and if you just remove the "Old" from the title tag it will work fine. I cannot change the html, so I have to modify the script to handle this.
Is there a way I can put some regular express that can bypass the replacement of the text in case if it occurs in between "<" and ">"?
or some other way to solve this.
I cannot use DOM to do the replacement, as it crashed the page when there were too much text, I am doing full page text replacement.
Thanks in advance for your help :)
EDIT: Changed the code to make it working :)

I might be unrelated but, you may need to replace message variable inside the replaced text. Since you declared message variable locally, it will not be available outside.
EDIT:
For your question, you can do that with RegEx but it will be quite hard. If I got time I might work on it a bit.
EDIT 2:
Try this one, it makes sure the Old is not in a tag.
>[^><]*(Old)[^<>]*<
EDIT 3:
This works file too, starting > is not necassary
[^><]*(Old)[^<>]*<
EDIT 4:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/([^><]*)Old([^<>]*<)/g, "$1<div onclick='say(\""+message+"\");'>New</div>$2");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>

Make your replace:
str.replace(/(>[^<]*)Old/g, "$1<div onclick='say(\"message\");'>New</div>");
Which basically means "Old not in an HTML tag"

Wouldn't it be simpler to assign id to <a> element instead and then run the same replace() on it's innerHTML (which shouldn't contain the tag's title attribute):
<html><head></head>
<body>
<div id="div1"><a id="link" href="#" title="This is Old">This is Old</a></div>
<script>
var message = "Hi";
var str = document.getElementById("link").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\"message\");'>New</div>");
document.getElementById("link").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>