How can I show HTML snippets on a webpage without needing to replace each < with < and > with >?
In other words, is there a tag for don't render HTML until you hit the closing tag?
The tried and true method for HTML:
Replace the & character with &
Replace the < character with <
Replace the > character with >
Optionally surround your HTML sample with <pre> and/or <code> tags.
sample 1:
<pre>
This text has
been formatted using
the HTML pre tag. The brower should
display all white space
as it was entered.
</pre>
sample 2:
<pre>
<code>
My pre-formatted code
here.
</code>
</pre>
sample 3:
(If you are actually "quoting" a block of code, then the markup would be)
<blockquote>
<pre>
<code>
My pre-formatted "quoted" code here.
</code>
</pre>
</blockquote>
is there a tag for don't render HTML until you hit the closing tag?
No, there is not. In HTML proper, there’s no way short of escaping some characters:
& as &
< as <
(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)
And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre> to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.
All other solutions, such as wrapping your code into a <textarea> or the (deprecated) <xmp> element, will break.1
XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:
<![CDATA[Your <code> here]]>
But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]>. So even in XML the simplest, most robust solution is via escaping.
1 Case in point:
textarea {border: none; width: 100%;}
<textarea readonly="readonly">
<p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>
<xmp>
Computer <xmp>says</xmp> <span>no.</span>
</xmp>
Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable.
<textarea disabled> code </textarea>
Hope that help someone looking for an easy way to get stuff done.
But warning, this won't escape the tags for you, as you can see here (the following obviously does not work):
<textarea disabled>
This is the code to create a textarea:
<textarea></textarea>
</textarea>
Deprecated, but works in FF3 and IE8.
<xmp>
<b>bold</b><ul><li>list item</li></ul>
</xmp>
Recommended:
<pre><code>
code here, escape it yourself.
</code></pre>
i used <xmp> just like this :
http://jsfiddle.net/barnameha/hF985/1/
The deprecated <xmp> tag essentially does that but is no longer part of the XHTML spec. It should still work though in all current browsers.
Here's another idea, a hack/parlor trick, you could put the code in a textarea like so:
<textarea disabled="true" style="border: none;background-color:white;">
<p>test</p>
</textarea>
Putting angle brackets and code like this inside a text area is invalid HTML and will cause undefined behavior in different browsers. In Internet Explorer the HTML is interpreted, whereas Mozilla, Chrome and Safari leave it uninterpreted.
If you want it to be non-editable and look different then you could easily style it using CSS. The only issue would be that browsers will add that little drag handle in the bottom-right corner to resize the box. Or alternatively, try using an input tag instead.
The right way to inject code into your textarea is to use server side language like this PHP for example:
<textarea disabled="true" style="border: none;background-color:white;">
<?php echo '<p>test</p>'; ?>
</textarea>
Then it bypasses the html interpreter and puts uninterpreted text into the textarea consistently across all browsers.
Other than that, the only way is really to escape the code yourself if static HTML or using server-side methods such as .NET's HtmlEncode() if using such technology.
If your goal is to show a chunk of code that you're executing elsewhere on the same page, you can use textContent (it's pure-js and well supported: http://caniuse.com/#feat=textcontent)
<div id="myCode">
<p>
hello world
</p>
</div>
<div id="loadHere"></div>
document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;
To get multi-line formatting in the result, you need to set css style "white-space: pre;" on the target div, and write the lines individually using "\r\n" at the end of each.
Here's a demo: https://jsfiddle.net/wphps3od/
This method has an advantage over using textarea: Code wont be reformatted as it would in a textarea. (Things like are removed entirely in a textarea)
In HTML? No.
In XML/XHTML? You could use a CDATA block.
I assume:
you want to write 100% valid HTML5
you want to place the code snippet (almost) literal in the HTML
especially < should not need escaping
All your options are in this tree:
with HTML syntax
there are five kinds of elements
those called "normal elements" (like <p>)
can't have a literal <
it would be considered the start of the next tag or comment
void elements
they have no content
you could put your HTML in a data attribute (but this is true for all elements)
that would need JavaScript to move the data elsewhere
in double-quoted attributes, " and &thing; need escaping: " and &thing; respectively
raw text elements
<script> and <style> only
they are never rendered visible
but embedding your text in Javascript might be feasable
Javascript allows for multi-line strings with backticks
it could then be inserted dynamically
a literal </script is not allowed anywhere in <script>
escapable raw text elements
<textarea> and <title> only
<textarea> is a good candidate to wrap code in
it is totally legal to write </html> in there
not legal is the substring </textarea for obvious reasons
escape this special case with </textarea or similar
&thing; needs escaping: &thing;
foreign elements
elements from MathML and SVG namespaces
at least SVG allows embedding of HTML again...
and CDATA is allowed there, so it seems to have potential
with XML syntax
covered by Konrad's answer
Note: > never needs escaping. Not even in normal elements.
It's vey simple ....
Use this xmp code
<xmp id="container">
<xmp >
<p>a paragraph</p>
</xmp >
</xmp>
<textarea ><?php echo htmlentities($page_html); ?></textarea>
works fine for me..
"keeping in mind Alexander's suggestion, here is why I think this is a good approach"
if we just try plain <textarea> it may not always work since there may be closing textarea tags which may wrongly close the parent tag and display rest of the HTML source on the parent document, which would look awkward.
using htmlentities converts all applicable characters such as < > to HTML entities which eliminates any possibility of leaks.
There maybe benefits or shortcomings to this approach or a better way of achieving the same results, if so please comment as I would love to learn from them :)
This is a simple trick and I have tried it in Safari and Firefox
<code>
<span><</span>meta property="og:title" content="A very fine cuisine" /><br>
<span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>
It will show like this:
You can see it live Here
You could try:
Hello! Here is some code:
<xmp>
<div id="hello">
</div>
</xmp>
This is a bit of a hack, but we can use something like:
body script {
display: block;
font-family: monospace;
white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>
<ul>
<li>Enjoy this dodgy hack,
<li>or don't!
</ul>
</script>
With that CSS, the browser will display scripts inside the body. It won’t attempt to execute this script, as it has an unknown type text/html. It’s not necessary to escape special characters inside a <script>, unless you want to include a closing </script> tag.
I’m using something like this to display executable JavaScript in the body of the page, for a sort of "literate progamming".
There’s some more info in this question When should tags be visible and why can they?.
function escapeHTML(string)
{
var pre = document.createElement('pre');
var text = document.createTextNode(string);
pre.appendChild(text);
return pre.innerHTML;
}//end escapeHTML
it will return the escaped Html
Ultimately the best (though annoying) answer is "escape the text".
There are however a lot of text editors -- or even stand-alone mini utilities -- that can do this automatically. So you never should have to escape it manually if you don't want to (Unless it's a mix of escaped and un-escaped code...)
Quick Google search shows me this one, for example: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
This is by far the best method for most situations:
<pre><code>
code here, escape it yourself.
</code></pre>
I would have up voted the first person who suggested it but I don't have reputation. I felt compelled to say something though for the sake of people trying to find answers on the Internet.
You could use a server side language like PHP to insert raw text:
<?php
$str = <<<EOD
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Minimal HTML5">
<meta name="keywords" content="HTML5,Minimal">
<title>This is the title</title>
<link rel='stylesheet.css' href='style.css'>
</head>
<body>
</body>
</html>
EOD;
?>
then dump out the value of $str htmlencoded:
<div style="white-space: pre">
<?php echo htmlentities($str); ?>
</div>
There are a few ways to escape everything in HTML, none of them nice.
Or you could put in an iframe that loads a plain old text file.
Actually there is a way to do this. It has limitation (one), but is 100% standard, not deprecated (like xmp), and works.
And it's trivial. Here it is:
<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>
Please let me explain. First of all, ordinary HTML comment does the job, to prevent whole block be interpreted. You can easily add in it any tags, all of them will be ignored. Ignored from interpretation, but still available via innerHTML! So what is left, is to get the contents, and filter the preceding and trailing comment tokens.
Except (remember - the limitation) you can't put there HTML comments inside, since (at least in my Chrome) nesting of them is not supported, and very first '-->' will end the show.
Well, it is a nasty little limitation, but in certain cases it's not a problem at all, if your text is free of HTML comments. And, it's easier to escape one construct, then a whole bunch of them.
Now, what is that weird LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo string? It's a random string, like a hash, unlikely to be used in the block, and used for? Here's the context, why I have used it. In my case, I took the contents of one DIV, then processed it with Showdown markdown, and then the output assigned into another div. The idea was, to write markdown inline in the HTML file, and just open in a browser and it would transform on the load on-the-fly. So, in my case, <!-- became transformed to <p><!--</p>, the comment properly escaped. It worked, but polluted the screen. So, to easily remove it with regex, the random string was used. Here's the code:
var converter = new showdown.Converter();
converter.setOption('simplifiedAutoLink', true);
converter.setOption('tables', true);
converter.setOption('tasklists', true);
var src = document.getElementById("mydoc-src");
var res = document.getElementById("mydoc-res");
res.innerHTML = converter.makeHtml(src.innerHTML)
.replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
src.innerHTML = '';
And it works.
If somebody is interested, this article is written using this technique. Feel free to download, and look inside the HTML file.
It depends what you are using it for. Is it user input? Then use <textarea>, and escape everything. In my case, and probably it's your case too, I simply used comments, and it does the job.
If you don't use markdown, and just want to get it as is from a tag, then it's even simpler:
<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
</div>
and JavaScript code to get it:
var src = document.getElementById("mydoc-src");
var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");
This is how I did it:
$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
It may not work in every situation, but placing code snippets inside of a textarea will display them as code.
You can style the textarea with CSS if you don't want it to look like an actual textarea.
If you are looking for a solution that works with frameworks.
const code = `
<div>
this will work in react
<div>
`
<pre>
<code>{code}</code>
</pre>
And you can give it a nice look with css:
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
JavaScript string literals can be used to write the HTML across multiple lines. Obviously, JavaScript, ECMA6 in particular, is required for this solution.
.createTextNode paired with CSS white-space: pre-wrap; does the trick.
.innerText alone also works. Run code snippet below.
let codeBlock = `
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to my page</h1>
<p>I like cars and lorries and have a big Jeep!</p>
<h2>Where I live</h2>
<p>I live in a small hut on a mountain!</p>
</body>
</html>
`
const codeElement = document.querySelector("#a");
let textNode = document.createTextNode(codeBlock);
codeElement.appendChild(textNode);
const divElement = document.querySelector("#b");
divElement.innerText = codeBlock;
#a {
white-space: pre-wrap;
}
<div id=a>
</div>
<div id=b>
</div>
//To show xml tags in table columns you will have to encode the tags first
function htmlEncode(value) {
//create a in-memory div, set it's inner text(which jQuery automatically encodes)
//then grab the encoded contents back out. The div never exists on the page.
return $('<div/>').text(value).html();
}
html = htmlEncode(html)
A combination of a couple answers that work together here:
function c(s) {
return s.split("<").join("<").split(">").join(">").split("&").join("&")
}
displayMe.innerHTML = ok.innerHTML;
console.log(
c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">
</div>
I used this a long time ago and it did the trick for me, I hope it helps you too.
var preTag = document.querySelectorAll('pre');
console.log(preTag.innerHTML);
for (var i = 0; i < preTag.length; i++) {
var pattern = preTag[i].innerHTML;
pattern = pattern.replace(/</g, "<").replace(/>/g, ">");
console.log(pattern);
preTag[i].innerHTML = pattern;
}
<pre>
<p>example</p>
<span>more text</span>
</pre>
You can separate the tags by changing them to spans.
Like this:
<span><</span> <!-- opening bracket of h1 here -->
<span>h1></span> <!-- opening tag of h1 completed here -->
<span>hello</span> <!-- text to print -->
<span><</span> <!-- closing h1 tag's bracket here -->
<span>/h1></span> <!-- closing h1 tag ends here -->
And also, you can just only add the <(opening angle bracket) to the spans
<span><</span> <!-- opening bracket of h1 here -->
h1> <!-- opening tag of h1 completed here -->
hello <!-- text to print -->
<span><</span> <!-- closing h1 tag's bracket here -->
/h1><!-- closing h1 tag ends here -->
<code><?php $str='<';echo htmlentities($str);?></code>
I found this to be the easiest, fastest and most compact.
There is an img tag being placed on a hidden portion of my wordpress site through some java script. Everytime I run a scan on my site looking for accessibility errors, this pulls up on every page of every site. I was wondering if there is a way to add an alt tag to it saying "this is empty" or anything really, since it's impossible to reach or see anyway.
I have tried looking at other alternatives, but I haven't had any luck so far, so any help would be greatly appreciated. The good thing is it seems to have a class name attached so hopefully that helps.
<div class="className">
<img>
<div>
</div>
</div
This is all you need:
$('img').attr('alt', 'Whatever you want');
or if you need it based on the class name in your example:
$('.className > img').attr('alt', 'Whatever you want');
Yes, you can always add attribute to an image using jquery, do it like this
$('img').attr('alt', 'This is very nice image');
If your image have a class than you can use
$('.class_name').attr('alt', 'This is very nice image');
If your image have a ID than you can use
$('#id_name').attr('alt', 'This is very nice image');
With this script you can set a default alt tag for all images that have a falsy alt tag (no alt tag, empty string, etc).
Important to note is that alt tags have a reason. People who use a text oriented browser (like blind people) use those alt tag so they at least know what kind of image there is. It is also used by some browsers when an image can't be loaded. So make sure all images without an alt tag (in your jQuery selection) are always hidden if you want a default alt tag otherwise it could be annoying.
$('img').filter(function() {
return !this.alt;
}).attr('alt', 'this is empty');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="className">
<img src="https://dummyimage.com/50x50/000/fff.png&text=test">
<img alt="" src="https://dummyimage.com/50x50/000/fff.png&text=test2">
<img alt="has alt" src="https://dummyimage.com/50x50/000/fff.png&text=test3">
</div>
Hi I am working on a project that is based on asp and javascript. Also I am new to both programming languages.
I created a popup window that displays a video. When you hit its "close" button, the popup would close but the audio kept playing in the background.
With this code now my audio stops. But it leads to another issue.
So here is the code.
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
I created a javascript variable - to copy the 'iframe src' value to it.
<script type="javascript">
var addurl = document.getElementById('#pict').src;
</script>
Then for 'onclick' in my span, I empty the src (so that the audio stops) and re-add the above variable value back in the src.(so that the user can play the video again in the same session)
onclick= ""$('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
I dont think the 'addurl' variable is working correctly here. AS I can't play the video twice in the same session. Its blank the second time.
How can I add iframe (src) value inside a variable??
I would appreciate if I could get any help to solve this problem.
As mentioned in my comment above, you have an extra > that closes your <iframe> before you set you id, width, height and other attributes. You simply need to remove the extra > and all should be fine.
Simple Demo
<iframe> id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
^ - Remove this
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
It looks like you also have some extra quotes "" inside of your javascript and miscellaneous &s.
onclick= ""$('#pict').attr('src','');
^^ - Remove the quotes
onclick= $('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
^ ------ ^ --- ^^ - Remove the `'`s `&`s and quotes
$('#pict').attr('src',addurl);>
Well, it seems a bit confusing. You have some options here, so I give you a few pointers on how to understand the code better.
If you are working inside the page content, you can insert ASP code like this:
<p>lorem ipsum: "<% =my_value %>" is my value</p>
In your code, it looks, as if you are inside a script block, building a string:
<%
dim some_asp_variable
dim my_value
some_asp_variable = "<p>Lorem ipsum: """ & my_value & """ is my value</p>"
Response.write some_asp_variable
%>
Note, how you have to write double quotes to put one quote in the string. and use & to concatenate the strings.
The part you have given:
onclick= ""$('#pict').attr('src','');$('#pict').attr('src','"& addurl & "');"" >
is correct, but only if you are composing a string in ASP (the second option).
I have a string that might contain one or more instances of a YouTube or Vimeo iframe. I am looking for a javascript function that searches through this string, detects the ID of the video in the iframe src, then replaces the existing instances of the iframe with an iframe wrapped in a div.
So input would be:
<p>Interesting text, great, fantastic.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EShfC-uhlv8" frameborder="0" allowfullscreen></iframe>
<p>Another great thing</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umiN04tPpl0" frameborder="0" allowfullscreen></iframe>
Output:
<p>Interesting text, great, fantastic.</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/EShfC-uhlv8?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>Another great thing</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/umiN04tPpl0?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
I have tried wrapping my brain around regexp, even with all the examples around I just can't seem to figure out how to do this.
Anyone have a solution?
Copy/pasting the work I am about to reference directly would get me in trouble, so hopefully an explanation of the methodology would be sufficient. ( If it's not, let me know. )
Assuming you have no idea of the names of the iframes, just plop down a getElementsByTagName(iframe) and then iterate over the resulting array with a loop that gathers all the info from the iframe, which you will use to create a replacement element using innerHTML. This replacement element will have you funky iframe wrapped in whatever you want. Finally, we use replaceChild(replacement, original) and you're set.
For example, here is how I create my replacement element:
var replacement = document.createElement("replacement");
replacement.innerHTML =
"<div class=iframe-container>"
+ "<iframe src=https://www.youtube.com/embed/EShfC-uhlv8?html5=1 frameborder=0 allowfullscreen></iframe>"
+ "</div>"
In simpler terms -- write the code as it would look in the .html file.
Another tricky thing you can do is adding IDs to all the elements and just going through them with getElementById, but it seems like a lot of extra work, unless you're the one developing the page and can just ID-entify the iframes.
Let me know how it goes! If anything is unclear, which would be understandable, considering the format I've written all of this in, just let me know and I will help.
PS: I know a lot of people here don't like innerHTML. They are all pansies.
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.