Extrating embedded styles from an HTML page with JQuery - javascript

So, here's the problem...
I have to:
Grab a page of html via a REST API with a AJAX call,
Extract a table with a known id from that html (which, thankfully, is well-formed)
Extract the associated css for the table from a style block,
Append the table to a div on my page, and
Re-apply the original CSS
Therefore the parts of the page that I'm interested in are:
<style>
#tableid td.someclass {
...
}
#tableid td.anotherclass {
...
}
[etc etc ..]
</style>
And
<table id="tableid">
...
</table>
So, going through the list above 1,2 & 4 are no problem at all. It's 3 and 5 that are taxing the brain - there are no external stylesheets to worry about BTW, everything is in the page that I'm grabbing inside a single tag.
I guess I could extract the entire element and then append it to my page - but that is messy and could result in unwanted side-effects. What I'd like to do is just extract the styling that applies to #tableid and then apply them the table appended to my div.
Is there an elegant way to do that?

You could pull the styles from the header using a standard jQuery finder:
var styles = $('head style').text();
Then run a regular expression against it:
var tableID = 'tableid',
pattern = new RegExp('#'+ tableID + '[^}]+}', 'g'),
tableStyles = styles.match(pattern);
This should give you an array of styles for your table’s id. Now you can append these styles to your current document’s head:
$('<style/>', { text: tableStyles.join('\n') }).appendTo('head');
Your use case might require some fine–tuning, but this should approximately give you what you’re after.

Related

Add Span to Label ID

I'm trying to add a span to a label for which I don't have access to the HTML as it's output from RSForms Pro. I would like to add a tooltip span to individual labels so when the person rolls their mouse over, they get some information.
Here is what the code looks like:
<p class="rsformVerticalClear"><input name="form[Services_DM][]" type="checkbox" value="Death Records Retrieval/Search" id="Services_DM0"><label for="Services_DM0">Death Records Retrieval/Search</label></p>
The next option has the class Services_DM1 and so forth.
How do I go about adding a span to "Death Records Retrieval/Search" without having access to the actual code? Is there a way to inject it?
How are you inserting the code into your page? Anything embedded (such as an Iframe) will be barred from being manipulated from (or, IIRC, accessed by) your javascript due to XSS concerns.
Assuming your html and the loaded html are rendered into the same document, you'd want to use the HTML DOM functions to manipulate the html post load. This function should do what you want:
function addToolTip(elementid, content, classname) {
var theelement=document.getElementById(elementid);
var thetooltip=document.createElement('span');
var thetext = document.createTextNode(content);
thetooltip.appendChild(thetext);
thetooltip.setAttribute('class',classname);
theelement.appendChild(thetooltip);
}
To generate a tooltip, just call addToolTip with your label's element, whatever content text you'd like to see within the tooltip, and a css class (I figured you may want this for styling).
You can target all the labels with class starting from "Services_DM" and append a span to them:
try this jQuery sample snippet.
var $span = $('<span>My span contents here </span>');
$('label[class^="Services_DM"]').each(function(index,item){
$(this).append($span);
});
The above code is not tested, for reference purpose only!

I have an error in Javascript with an A href

I don't understand why this an issue.
Could someone explain the issue and may be a possible fix.
Thank you.
Error:
XHTML element "a" is not allowed as child of XHTML element "script" in this context
Code:
<script type="text/javascript">
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version # http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='More Info';
var hideText='Less Info';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
***$('.toggle').prev().append(' ('+showText+')');***
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
<script>
There are differences between HTML and XHTML. In XHTML, scripts don't have a CDATA content type: the contents is treated exactly the same as any other element. It's not just a NetBeans issue.
So, there are several solutions:
Put the script in a separate file, so that its contents will not be mangled by the XML parser. This is the best solution, as it doesn't have any drawbacks. It works for HTML and XHTML.
Make sure the contents don't contain any < or & signs. Also make sure that editing the script will not introduce < or & signs later on. Replace them with their entity references: < and & respectively.
If the script doesn't contain ]]>, you can put the whole content in a <![CDATA[ .. ]]> block. This may even work in HTML in some browsers, but as <![CDATA[ is not formally defined as part of the HTML standard, this method is (officially) not HTML compatible.

Store HTML and CSS of target container

I have a container div containing some html - for example:
<div id="container">
<h1>Bla bla</h1>
<div class="myItem"></div>
Send
</div>
and some css related to the container:
#container {background:red;}
#container h1 {font-size:30px;}
#container .myItem {color:red;font-size:12px;}
I would like to store all the html inside the container and all the related css to it in some variable/database/whatever is available, and then load it back on a new page. The content is dynamic and it's up to the user to style the container and it's content.
How could I accomplish this? One way I was thinking was to retrieve all this properties using javascript and than store them somehow in the database to load them back later or try to do this with html5 webstorage.
Is there any plugin that does this?
EDIT:
I've also tried html2canvas but it's support for css3 is not good enough to render the elements correctly.
If the CSS and HTML are both stored within the page, you can just grab the content (based on the wrapper) and store it in localStorage (if this works for your purpose).
An example with jQuery and localStorage... you will need to change where things are being saved from to fit your case.
jsFiddle
Saving the items:
var html = $('#container').html();
localStorage.setItem('html', html);
var css = $('#csscontainer').html();
localStorage.setItem('css', css);
Pulling/showing the items:
var showHtml = localStorage.getItem('html');
var showCss = localStorage.getItem('css');
$('#showHtml').html(showHtml);
$('#showCss').html(showCss);

How can I Strip all regular html tags except <a></a>, <img>(attributes inside) and <br> with javascript?

When a user create a message there is a multibox and this multibox is connected to a design panel which lets users change fonts, color, size etc.. When the message is submited the message will be displayed with html tags if the user have changed color, size etc on the font.
Note: I need the design panel, I know its possible to remove it but this is not the case :)
It's a Sharepoint standard, The only solution I have is to use javascript to strip these tags when it displayed. The user should only be able to insert links, images and add linebreaks.
Which means that all html tags should be stripped except <a></a>, <img> and <br> tags.
Its also important that the attributes inside the the <img> tag that wont be removed. It could be isplayed like this:
<img src="/image/Penguins.jpg" alt="Penguins.jpg" style="margin:5px;width:331px;">
How can I accomplish this with javascript?
I used to use this following codebehind C# code which worked perfectly but it would strip all html tags except <br> tag only.
public string Strip(string text)
{
return Regex.Replace(text, #"<(?!br[\x20/>])[^<>]+>", string.Empty);
}
Any kind of help is appreciated alot
Does this do what you want? http://jsfiddle.net/smerny/r7vhd/
$("body").find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
Basically select everything except a, img, br and replace them with their content.
Smerny's answer is working well except that the HTML structure is like:
var s = '<div><div>Link<span> Span</span><li></li></div></div>';
var $s = $(s);
$s.find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
console.log($s.html());
The live code is here: http://jsfiddle.net/btvuut55/1/
This happens when there are more than two wrapper outside (two divs in the example above).
Because jQuery reaches the most outside div first, and its innerHTML, which contains span has been retained.
This answer $('#container').find('*:not(br,a,img)').contents().unwrap() fails to deal with tags with empty content.
A working solution is simple: loop from the most inner element towards outside:
var $elements = $s.find("*").not("a,img,br");
for (var i = $elements.length - 1; i >= 0; i--) {
var e = $elements[i];
$(e).replaceWith(e.innerHTML);
}
The working copy is: http://jsfiddle.net/btvuut55/3/
with jQuery you can find all the elements you don't want - then use unwrap to strip the tags
$('#container').find('*:not(br,a,img)').contents().unwrap()
FIDDLE
I think it would be better to extract to good tags. It is easy to match a few tags than to remove the rest of the element and all html possibilities. Try something like this, I tested it and it works fine:
// the following regex matches the good tags with attrinutes an inner content
var ptt = new RegExp("<(?:img|a|br){1}.*/?>(?:(?:.|\n)*</(?:img|a|br){1}>)?", "g");
var input = "<this string would contain the html input to clean>";
var result = "";
var match = ptt.exec(input);
while (match) {
result += match;
match = ptt.exec(input);
}
// result will contain the clean HTML with only the good tags
console.log(result);

javascript - remove element/node with no ID and specific content

I'm struggling to decipher a way to remove several specific href elements which contain no IDs and are children of individual parents with no IDs.
The best I can manage is identifying the four offending, out of 8 or 9 href tags (and the number may vary), by a specific word within the URL itself. For this, I do the following:
<script language=javascript>
var xx = document.getElementById('theID').getElementsByTagName('a');
var ptn=/\=media/;
for(var i=0; i<xx.length; i++) {
if(ptn.exec(xx[i])){
alert(xx[i]);
}
}
</script>
Of course all this gives me is the four specific URLs within the href where "=media" is present. Now, somehow, I need to be able to remove either these href elements, or their parent elements (which happen to be unordered list tags). It's not until I get a level higher (table cell) that I gain access to an element ID, or anything distinguishing besides a particular word within the URL itself.
I'm open to any approach at this point - PHP may be an option (I really haven't explored this yet), but for this, javascript was my first logical choice. I can't tamper with the page that generates the links directly, only a secondary page which gets included at page load time.
Any pointers on how to solve this??
======================== final solution =====================
<script language=javascript>
var xx = document.getElementById('theID').getElementsByTagName('a');
var ptn=/\=media/;
for(var i=0; i<xx.length; i++) {
while(ptn.exec(xx[i].href)){
alert(xx[i]);
xx[i].parentNode.removeChild(xx[i]);
}
}
</script>
You don't need the ID to remove an element. You only need a reference to the element (which you seem to have).
instead of this:
alert(xx[i]);
try this:
XX[i].parentElement.removeChild(xx[i]);
You can call removeChild() on the parent element, like so:
xx[i].parentNode.removeChild(xx[i]);
As a side note, your regular expression isn't being executed on the href property. Change your if statement to:
if(ptn.exec(xx[i].href)){
var parent = xx[i].parentNode;
parent.removeChild(xx[i]);
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter2.html has some nice examples of similar operations (scroll down).

Categories