This question already has answers here:
JavaScript regex multiline text between two tags
(5 answers)
Closed 7 years ago.
I have this html content
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><img style="margin-left: auto; display: block; margin-right: auto;" src="../img/escudocaba.png" alt="#" width="470" height="90" /></center>
<h1>Hoddda</h1>
</body>
</html>
I need to extract the content of the body without including the body tags. I have made this regex that match perfectly:
/<body[^>]*>(.*?)<\/body>/is
as you can see in this website
https://regex101.com/
But when I use it
var bodyHtml=$editor.val().match( /<body[^>]*>(.*?)<\/body>/is);
I get no results.......Also tried a similar regex which did not work out in the end with the same format and without modifiers and it was matching
var bodyHtml=$editor.val().match(/(?:.(?!<\s*body[^>]*>))*\>.+/);
for example returned
<center><img style="margin-left: auto; display: block; margin-right: auto;" src="../img/escudocaba.png" alt="#" width="470" height="90" /></center>
How can I do in this case to use regex modifiers with this jquery function?. Thanks
In javascript flavour of regex the . doesn't match new lines.
To solve that you can use [^] or [\s\S] or [\d\D] or (?:.|\n) ...
Try this code:
var bodyHtml = $editor.val().match(/<body[^>]*>([\s\S]*?)(<\/body>|$)/i)[1];
The s-modifier doesn't exist in JS. try using [\s\S] instead of the dot, as suggested here: Javascript regex multiline flag doesn't work
like this:
<body[^>]*>([\s\S]*?)<\/body>
Related
This question already has answers here:
Iframe creates extra space below
(12 answers)
Image inside div has extra space below the image
(10 answers)
Closed last month.
How to remove the white margins from this web page.
Code of webpage:
<html>
<head></head>
<body>
<iframe id="i1" src="yoursource1.html" width="100%" style="height:100vh"></iframe>
<iframe id="i2" src="yoursource2.html" width="100%" style="height:100vh"></iframe>
</body>
<html>
iframes have a default display type of inline. Inline elements are initially designed for text and your iframe acts a bit as one giant character. It has a bit of white space beneath for the descenders of the characters (characters like j and g have descenders).
To cut a long story short, try changing the display type with css (and remove the border).
body {
margin: 0;
}
iframe {
display: block;
border: 0;
}
<iframe id="i1" src="yoursource1.html" width="100%" style="height:100vh; background:black"></iframe>
<iframe id="i2" src="yoursource2.html" width="100%" style="height:100vh; background:black"></iframe>
I need to include a HTML which adds a preview pane inside a JavaScript function, something like this :
<html>
<body>
<div style="height: 70%; border: 1px solid #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">master</div>
</div>
<div style="height: 30%; border: 1px solid; #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">detail</div>
</div>
</body>
</html>
just use quotes around html like
var a = 'some string';
just you will have to have all hmtl in 1 line or add line by line to var.
Or use ES5 and just make like this:
let a = `any
string
with new lines`;
Or
Use jsx with ReactJs for html inside js! It's awesome :-) Last time i wrote html outside js was like 2 years ago..
https://facebook.github.io/react/
great place to start learning:
https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
I'm not exactly sure if this is what you are asking...
Do you want to add HTML dynamically via JavaScript?
This is a way to do it with jQuery:
var html = '<div id="whatever"></div>';
$("body").prepend(html);
If you want to write html markup in javascript you can move towards React JS this is very power full engine for writing html markup in javascript it provides lot of others things.
You can:
use some template engine like:
mustaches https://github.com/janl/mustache.js/
angular https://angularjs.org/
write the code as text inside a var and then append it to them dom. (see document.write())
I am making a bookmarklet in which provides the user with navigation links on any page. I have the code I need, but am having trouble with the document.body.innerHTML.
Here's the code
document.body.innerHTML = "<style>
body{padding:0;margin:0;}
.myFloatBar{
bottom:0;
left:0;
width:100%;
position:fixed;
}
</style>
<div class="myFloatBar">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0">
</div>";
But no matter what I do, i can't seem to find the problem. I also tried running it through one of the "html encoders", thinking that the quotes were the issue, but that didn't seen to work either.
What did I did wrong?
Your double-quotes are a problem -- the fastest fix is to use single-quotes around your string. Additionally, using the innerHTML method on the body element will actually remove the entire contents of the body and replace it with your new elements. If you just want to append (add to) the body, use the insertAdjacentHTML method instead.
document.body.insertAdjacentHTML('beforeend','<style>
.myFloatBar{
bottom:0;
left:0;
width:100%;
position:fixed;
}
</style>
<div class="myFloatBar">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0">
<img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0">
</div>')
working fiddle
http://jsfiddle.net/fNPvf/9226/
you dont need document.body.innerHTML
call CSS in head tag
I'm trying to get a line of flags wiht google translate on my site. This other site already has it, but it uses blogger API. I changed the JS accordingly, but I found out that my forum software encodes de apostrophe as \'
Is there any way I can write the same html+js below without using apostrophes?
<a target="_blank" rel="nofollow"
onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(document.URL)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 24px; height: 24px;"
alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
title="Google-Translate-Chinese">
As it is, the forum engine translates it as ""window.open(\'http://www.google.com/translate?u=\'+"
Try using something like this
onclick="window.open(\"http://www.google.com/translate?u=\"+encodeURIComponent
(document.URL)+\"&langpair=pt%7Czh-CN&hl=pt&ie=UTF8\"); return false;"
Since you are already using escape string, your forum engine might not replace this with another '\'.
I have a simple webpage that used a include html file as the left navigation. Here is the code for each button:
<tr><td id="tdIndex" onmouseout="javascript:DoMouseOut(this)" onmouseover="javascript:DoMouseOver(this)"
class="menuDefault" onclick="javascript:NavPage('All_Rooms_Today.html');">All Rooms Overview</td></tr>
Here is the iFrame code on the parent page:
<iframe src="All_Rooms_Today.html" style="width: 100%; height: 500px" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0">
</iframe>
I need to write the javascript function navpage to populate the iframe.
Any help will be appreciated.
No need for JavaScript.
All Rooms Overview
<iframe name="name_of_frame" …>
You can almost certainly replace all the mouseover/out stuff with:
#some_container a {
display: block;
}
#some_container a:hover {
background: foo;
color: bar;
}
If you can't, then you should certainly remove the string javascript: as there is no use in having a label at that point (if you think it means "This is JavaScript", then you're wrong, for intrinsic event attributes you do that with a meta element).
For that matter, frames are a pain for bookmarking and for search engines (among other things). You're already using includes, you should probably keep using them and have proper pages including the navigation instead of framed pages.