Hi genius programmers how can I see my code in my website I'm currently making a web page tutorial where in you can see codes but the code I inputted is always executing can anyone help me about this?
Thank's a bunch.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
You'll need to convert all your < to < and all your > to > and wrap everything in <pre> and </pre> tags. Like so:
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</pre>
The old-school solution (deprecated since HTML3.2 and removed/discouraged in HTML5) that still works is to wrap everything inside an <xmp></xmp> (example) tag.
The idea is that it can hold any string except the string representing the start of the xmp-closing tag: </xmp
Besides it being deprecated since forever there are browser-inconsistencies and other nuisances (like copying text from an xmp in firefox removes line-endings, or how much spaces a tab-character represents and the like).
The correct way is to just escape the & and < character (in this order) !
No need to escape the >: that's just myth since we already took out the open-tag-character < (and I thoroughly checked current and historical specs regarding this)!!
Obviously escaping the & characters prior to escaping the < character is because < becomes < and then becomes &38;#60; (displayed as < instead of the intended <) if we did not start by escaping the & characters first!
You can then wrap the result inside any tag, like <pre>, <code>, or ...
That leaves you with new-lines:
You either replace them with <br> or set the appropriate css-styling rules to control white-spacing (if they were not already set as default like for a <pre>-tag).
Live example:
<textarea style="width:99%;height:150px;"></textarea>
<button onclick="
var txt=document.getElementsByTagName('textarea')[0];
txt.value=txt.value.replace(/\u0026/g, '\u0026#38;').replace(/\u003c/g, '\u0026#60;');
">HTML-Escape (&) and (<)</button>
Fine print:
Maximum cross-browser (read ancient) compatibility is obtained by using decimal escapes since hexadecimal escapes were later added and implemented. Named entity escapes (like &) had similar problems (also in embedded javascript) because of the serious status these characters have/had in pre-parsing the HTML!
Theoretically there is a bigger rule-set regarding when & must absolutely be replaced and when it's not required (yes theoretically you don't need to escape all & characters, mainly just the ones that would render a valid escape and this is an ever-growing list since the living standard).
Thus the simplest and fastest way is to just replace them all! No need for special algorithms utilizing lookup-lists etc..
You can try this.
function show_html(){
var val = document.getElementsByTagName('textarea')[0].value
val = val.replace(/</g, "<").replace(/>/g, ">");
val = '<pre>'+val+'</pre>';
document.getElementById('result').innerHTML = val
}
<textarea id="html" onchange="javascript:show_html()"></textarea>
<p id="result">sdf</p>
The textContent and the innerText can be used to convert HTML code to plain string. You can use something like the following:
<textarea style="width:99%;height:150px;"></textarea>
<button onclick="
var htmlText= document.getElementsByTagName('textarea')[0].value;
var result = document.getElementById('result');
result.innerText = htmlText;"
>Convert HTML to plain text</button>
<div id="result" style="width:99%;height:150px;"></div>
Hit f12 for the developer tools or press Ctrl+U for the source code
Related
I have a question on how to store a string in Javascript when you only know the first couple letters. Here is an example. The HTML code is this:
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER>
<IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<HR>
Link Name is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2> Send me mail at <a href="mailto:support#yourcompany.com">
support#yourcompany.com</a>.
<P> This is a new paragraph!
<A href="/003U0000015Rmza">Persons's Name/A> </P>
<P> <B>This is a new paragraph!</B> </P>
<BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
<HR>
</BODY>
</HTML>
I need to store the full string of '003U0000015Rmza', but I will only know that it starts with '003'.
Is there a way in Javascript to search for the characters '003', and once it's found, store the full string in a variable?
Thanks in advance!
You want to have a way to see if a string starts with a certain pattern. One easy way is to overload the String type to have a startsWith() function .
Look at this example.
This is where String.indexOf() can come in handy.
inThis.indexOf(findThat) function searches the string it's called on for the string you pass in. It returns a number stating where to find the string you looked for (findThat) within the string that you looked in (inThis). If it doesn't find the string at all, it returns -1, which isn't a valid position in any string.
To use this to find whether inThat starts with findThis, you can do something like this:
if (inThis.indexOf(findThat) === 0) {
// do something
}
To store that string somewhere, you might try this:
var myString; // The place where we'll store the string
if (theLink.href.indexOf('003') === 0) {
// This is the string we need to store
myString = theLink.href;
}
This works because the first character in any string is at position 0. So if indexOf found '003' at position 0, then we know the string starts with '003'.
I'm relatively new to HTML, js, coming from Delphi. I have reviewed the following answers but they don't seem to work for me, or I am not understanding what they are saying:
Multi line print
.innerHTML <br> breaking
html <br> and innerHTML problem
Problem: all my text is printing in one line, rather than line breaking.
Below is the HTML source.
<!DOCTYPE HTML>
<html>
<head>
<title>Test Module</title>
</head>
<body >
<p id="demo"></p>
<button id="btnRPCTest" onclick="RPCTest()">Test RPC call</button>
<p id="RPCTarget">(RPC output here...)</p>
<script id="broker" src="scripts/rpcbroker.js" type="text/javascript"></script>
<script>
function RPCTest() {
var Div = document.getElementById("RPCTarget")
Broker_CallV("XUS INTRO MSG", []);
var text = Broker_ResultsDelim("<br />\n");
Div.innerHTML = text;
}
</script>
</body>
</html>
Above, the code makes a remote procedure call (RPC) to the server, and the results are put into a custom TStringList object that I created, that at it's core is an array of strings.
Below, is the code that gets back the results as a string, deliminated by the specified parameter ADelim.
function Broker_ResultsDelim(ADelim) {
return TStringList.GetTextDelim(RPCBrokerV.Results, ADelim);
}
Below, the array of strings should be concatenated into one long string, with contained line breaks.
GetTextDelim: function (Self, ADelim) {
return (Self.FData).join(ADelim) + ADelim;
},
When I run this code, and step through it with the Chrome developer console, I can type 'text' in the console, and the line breaks are correct.
> text
"
...............................................................
.................#.............................................
...###############.......##############..........########......
.################......################........####...####.....
.##.....####..........##....####.....###......##.......####....
.###....###...##............###......##......##................
..##....#######.............###.....###.....###................
.......###..##.............##########.......###....#########...
.......###.................###...............##........###.....
.......###.................###...............###......####.....
......###.................###.................####....###......
...###########........############.............##########......
......................................................###......
................................................########.......
...............................................................
<br />
"
But after the text gets inserted into the div, it is all on one line. I can't demonstrate that here, because when I copy the text (which appears on the screen to be all one line), and paste it into this question on StackOverflow, suddenly is is formatted correctly, with line breaks.
This makes me think that the text does contain the line break BR codes , but they are being ignored in the div.
I would think that this should be an easy question for someone knowledgeable in HTML, but it's got me scratching my head in confusion. Thanks in advance for the help.
Kevin
I'm going to ignore how you're generating the text. I'm going to assume that it is returned in a format like this, where there are actual line breaks ("\n") at the end of every line:
var code =
"\
...............................................................\
.................#.............................................\
...###############.......##############..........########......\
.################......################........####...####.....\
.##.....####..........##....####.....###......##.......####....\
.###....###...##............###......##......##................\
..##....#######.............###.....###.....###................\
.......###..##.............##########.......###....#########...\
.......###.................###...............##........###.....\
.......###.................###...............###......####.....\
......###.................###.................####....###......\
...###########........############.............##########......\
......................................................###......\
................................................########.......\
...............................................................\
"
I used \ to concatenate the strings, but a "\n" works as well. Now, all you have to do is:
CSS
html {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
/* so that the text is monospace and lines up correctly */
}
HTML
<div id="holder">
</div>
JavaScript
$("#holder").append(code.split("\n").join("<br>"));
// or, without jQuery
document.getElementById("holder").innerHTML = code.split("\n").join("<br>");
fiddle
Your second option is to, as Hardy mentioned in the comments, use a <pre> tag. This will maintain the formatting that you give it, so all you would have to do is insert code into a <pre> tag.
Use <pre> tag in your javascript like:
<script>
function RPCTest() {
var Div = document.getElementById("RPCTarget")
Broker_CallV("XUS INTRO MSG", []);
var text = Broker_ResultsDelim("\n");
Div.innerHTML = "<pre>" + text + "</pre>";
}
</script>
you only have one
<br/>
tag in your output. Notice that it is at the end of the console output you need to replace \n line breaks with
<br />
or replace
<p id="RPCTarget">(RPC output here...)</p>
with
<pre id="RPCTarget">(RPC output here...)</pre>
and remove the trailing
<br />
I want to get contents of element without any changes. When I using .html(), it unnecessarily escapes characters, for example & to &.
In my code, Content is data come from server. Problem is the original data has been escaped. I also don't want to use unescaping process. It means 2 time change the original data.
Any idea would be very appreciated.
Here is the code:
<html>
<head>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><b>Hey, Give me originial HTML contents</b>, "& < >" without any escapes. pls</p>
<p></p>
<script>
var str = $("p:first").html();
$("p:last").text(str);
</script>
</body>
</html>
EDIT:
As mentioned above, I need data without changes. HTML tags too. I know what .text() does.
EDIT2:
str must be exactly. <b>Hey, Give me originial HTML contents</b>, "& < >" without any escapes. pls. Please understand the question is not about how to display it correctly. Variable str must hold correct(original) data.
You should use same combination:-
var str = $("p:first").html();
$("p:last").html(str);
or
var str = $("p:first").text();
$("p:last").text(str);
Or if you want to display the tags as is you will have to escape the "<", ">" , "&" etc
var str = $('p:first').html();
str = str.replace(/>/g,">").replace(/</g, "<");
$("p:last").html(str);
Change
$("p:last").text(str);
to
$("p:last").html(str);
jsFiddle
below code works fine to copy innerhtml as is into another element.
Jquery Fiddle
var str = $("p:first").innerHtml();
$("p:last").text(str);
Not sure if this is an actual problem per se but I'm using Epic Editor to input and save markdown in my GAE application (webpy with mako as the templating engine).
I've got a hidden input element in the form which gets populated by the EpicEditor's content when I submit the form but all the white spaces are replaced by . Is this an intended feature? If I check the same code on the EpicEditor site, it clearly returns spaces instead of so what's different about mine?
<form>
<!-- form elements -->
<input id="content" name="content" type="hidden" value></input>
<div id="epiceditor"></div>
<button type="submit" name="submit" id="submit">submit</button>
</form>
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML; //all the spaces are returned as and breaks are <br>
$('input#content').html(content);
});
</script>
NOTE: I want to save my content as markdown in a TextProperty field my data store and generate the html tags when I retrieve it using marked.js
I'm the creator of EpicEditor. You shouldn't be getting the innerHTML. EpicEditor does nothing to the innerHTML as you write. The text and code you are seeing will be different between all the browsers and it's how contenteditable fields work. For example, some browsers insert UTF-8 characters for spaces some  .
EpicEditor gives you methods to normalize the text tho. You shouldn't ever be trying to parse the text manually.
$('button#submit').click(function(){
var content = editor.exportFile();
$('input#content').html(content);
});
More details on exportFile: http://epiceditor.com/#exportfilefilenametype
P.S. You don't need to do input#content. Thats the same as just #content :)
You can do this if you dont find out why:
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML;
content = content.replace(" ", " ");
$('input#content').html(content);
});
</script>
[EDIT: solved]
I shouldn't be using innerHTML, but innerText instead.
I figured out that Epic Editor uses on all spaces proceeding the first one. This is a feature, presumably.
However that wasn't the problem. ALL the spaces were being converted to , eventually, I realised it occurs when Epic Editor loads the autosaved content from localStorage.
I'm now loading content from my backend every time instead of autosaving. Not optimal, but solves it.
This is example code in ASP.NET MVC 3 Razor:
#section header
{
<script type="text/javascript">
$(function() {
alert('#Resources.ExampleCompany');
});
</script>
}
<div>
<h1>#Resources.ExampleCompany</h1>
</div>
The code above this is just an example, but it also shows my problem with encoding. This variable #Resources.ExampleCompany is a file resources.resx with value ExampleCompany = "Twoja firma / Twój biznes"
In JavaScript, the alert shows the "Twoja firma / Twój biznes".
Why is character 'ó' 'ó'? What am I doing wrong?
In HTML tag, <h1>#Resources.ExampleCompany</h1> is displayed correctly.
UPDATE:
Mark Schultheiss wrote a good hint and my "ugly solution" is:
var companySample = "#Resources.ExampleCompany";
$('#temp').append(companySample);
alert($('#temp').text());
Now the character is ó and looks good, but this is still not answer to my issue.
According to HTML Encoding Strings - ASP.NET Web Forms VS Razor View Engine, the # syntax automatically HTML encodes and the solution is to use the Raw extension-method (e.g., #Html.Raw(Resources.ExampleCompany)) to decode the HTML. Try that and let us know if that works.
Some of this depends upon WHAT you do with the text.
For example, using the tags:
<div id='result'>empty</div>
<div id='other'>other</div>
And code (since you are using jQuery):
var whatitis="Twoja firma / Twój biznes";
var whatitisnow = unescape(whatitis);
alert(whatitis);
alert(whatitisnow);
$('#result').append(whatitis+" changed to:"+whatitisnow);
$('#other').text(whatitis+" changed to:"+whatitisnow);
In the browser, the "result" tag shows both correctly (as you desire) whereas the "other" shows it with the escaped character. And BOTH alerts show it with the escaped character.
See here for example: http://jsfiddle.net/MarkSchultheiss/uJtw3/.
I use following trick:
<script type="text/javascript">
$('<div/>').html("#Resources.ExampleCompany").text();
</script>
Maybe it will help.
UPDATE
I have tested this behavior of Razor more thoroughly and I've found that:
1.When the text is put as normal content of html then #Html.Raw method simply helps and writes char 'ó' without html encoding (not as: ó)
example:
<div> #Html.Raw("ó") </div>
example:
<script type="text/javascript">
var a = $('<div/>').html('#("ó")').text();// or var a = '#Html.Raw("ó")';
console.log(a); // it shows: ó
</script>
2.But if it is put inside html tags as attribute then Razor converts it to: ó and #Html.Raw doesn't help at all
example:
<meta name="description" content="#("ó")" />
Yo can fix it by putting the entire tag to Resource (as in that post) or to string (as in my example)
#("<meta name="description" content="ó" />")
So, sometimes somebody could have been little confused that the answers helps the others but not him.
I had similar issue, but in my case I was assigning a value from Resource to javascript variable. There was the same problem with letter ó encoding. Afterwards this variable was binded to a html object (precisely speaking by knockout binding). In my situation below code give a trick:
var label = '#Html.Raw(Resource.ResourceName)';