Parsing HTML in plain text or XML form - javascript

I have 2 questions:
1st Question: Can a HTML element have more than one class(be part of more than one class)?
<p class="paragraphClass" class="highlightClass"/> // is that allowed?
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class? I use AJAX to get HTML from a server(returned as text not XML), I then need to convert all HTML elements that have the class "updatable" to text-area HTML elements.
What do you think would be the easiest way to convert all HTML elements of a specific class to textareas when I have a string of HTML as either text or XML.

1st Question: Can a HTML element have more than one class(be part of more than one class)?
Yes, but like this:
<p class="paragraphClass highlightClass"/>
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class?
The dead-simplest way to do this is with jQuery (surprise, surprise):
var html = 'your html in a string here',
$html = $(html),
$elts = $html.find('.someClassName');
// $elts is a (array-like) jQuery object which
// contains all the elements in the HTML string with class 'someClassName'
See the jQuery selectors API docs for more.

You can have as many classes as you like on any element by seperating them with spaces. eg:
<p class="paragraphClass highlightClass"></p>
Use a library like jQuery to do this.

1) Yes, but your syntax is not correct. You can specify more than one class separated by spaces like:
<p class="paragraphClass highlightClass"/>
2) You could just insert your HTML into the DOM using some elements .innerHTML property. That element could have display: none; so that it doesn't affect your page. Then you can use normal DOM methods on them like document.getElementByClassName('updatable'); Note that getElementByClassName() is not defined in IE so you have to write your own that selects by tagName and then iterates through them matching the classes, or use a framework like jQuery.

there is always jquery. You can use the selector to select all the elements with that class and then convert it to a textarea. Sounds like you want to convert it to edit that paragraph.
$(".paragraphClass").each(function{
$(this).replaceWith("<textarea>"+ $(this).text() +"</textarea>");
})
http://jsfiddle.net/bQgN3/

Related

Insert space into html tag

I am using window.open('data:application/vnd.ms-excel,' html) to export an HTML table to Excel. I pass the HTML as a string and it works fine.
But I found problem when trying to add a style attribute. I had to change, for example, <th> to <th style="background-color:cornflowerblue"> but the space between th and style disappears and I get <thstyle="background-color:cornflowerblue">. If it was a space in innerHTML, would be fine, but in this case I can't use .
The way you are describing is not really the right way to do it.
You would need to set an attribute style with its value by using JavaScript
Since there isn't much you supplied in order to base my answer on that, you'd have to use the following DOM element: setAttribute()
Here's how it's done:
document.getElementById("yourID").setAttribute("style", "color: yourColor;");
Keep in mind that the above selector is selecting elements by their ID. You can also do that by TagName and instance just like here: https://www.w3schools.com/jsref/met_element_setattribute.asp

Insert HTML into all Elements

I am having an issue were jQuery is not inserting the specified html element into all instances of #element. However, it is only inserting it into the first element but not the other 3 with that id.
var htmlcode = '<div class="block"></div>';
$('#element').html(htmlcode);
If I switch it to $('div') it will work but this isn't what I want. I need to have this inserted into all divs with the id of #element. From what I understand from the documentation this should be working?
Ids must be unique on a page. As they are implemented as a fast-lookup dictionary there is only one element stored against each key/id.
jQuery and JavaScript can only see the first one because of this.
Use a class instead.
e.g.
$('.element').html(htmlcode);

Select elements jQuery with Regex

I have a HTML page where many elements are dynamically inserted as the user requests. Each of these elements have an id attribute with some string plus a numeric id value plus another string.
Example: budget_budget_alive_elements_attributes_10_unit_value
And so I tried the following selector:
$("#budget_budget_alive_elements_attributes_\d+_unit_value");
But it unfortunately does not work.
Some person wrote an article of an extension to jQuery selector for fetching these kinds of ids but I had no luck with that, either.
Can you help me here? Given the constraints of the element's id values, how can I make a selector for them?
You'd better use class selector (by adding same class to these elements).
Else you have to use something like:
$("[id^='idbudget_budget_alive_elements_attributes']")

:contains incorrectly selecting child elements

Currently I'm trying to select a link element with the jQuery :contains selector. This works when the contents of the link is just text. but it seems that when the element contains other HTML elements the :contains selector selects a child element instead. Example
HTML:
<b> two</b> this not bold <b>This</b> is a bold Link
from that html, I'm trying to select the link using this selector
jQuery:
var selector = "a:contains('<b> two</b> this not bold <b>This</b> is a bold Link')";
var returnObj = $(selector);
Instead of getting one returned object (the link), jQuery returns three objects:
the first bold element
the text this is not bold
the second bold element
the problem isn't the single quotes within the contains(), as I've tried with and without them.
This is just a simplified example of what I'm trying to do. In reality, I'm dynamically creating selectors based off of a link object a user clicks. I then store that selector in a database for use later (for my app to display content related to that link). Since I can get the contents of the link, I figured I'd just use a:contents() if the link doesn't have an id.
based off of these pages, I seem to have my syntax right:
http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want_2
http://api.jquery.com/contains-selector/
Thoughts on how to get the link object returned? Thanks!
hope this isn't too stupid a question, I'm new to JS and jQuery.
As mentioned, :contains() is meant to select by text content only, not inner HTML.
If you must match the a element based on that text, strip out the <b> tags:
var selector = "a:contains(' two this not bold This is a bold Link')";
Otherwise, see if you can simplify this selection by using a contextual selector (e.g. select based on its surrounding elements, parents, siblings, etc), or assign it a class and select by that class instead.
On a side note, I'd consider this yet another jQuery bug (could be a parsing error in Sizzle). In your situation, :contains() is not supposed to return or create any elements; it's supposed to return no matches simply because the selector doesn't match your a element. I suspect what it's doing instead is treating the <b></b> tags as new elements, and creating them on the fly along with your a element, which is wrong because the tags are inside the argument string and meant to be taken literally...
First of all your selector text does not match the actual text in your html.
The selector includes the this not bold which is not present in the html.
Most importantly the :contains works with the text only.. so you should check for
$("a:contains('two this not bold This is a bold Link')");
It is a very inefficient way though, and you should better add a class to the elements you want to target and use that for targeting..

How to get element from template by javascript?

I dont know good method how to get DOM element from template by javascript.
Example template:
<script id = "template" type="text/template">
<div>text1</div>
<div>text2</div>
<div>text3</div>
</script>
For example i want get div with "text2"
There is ways which i know, all of them are bad:
Add "class" to all elements - it breaks semantics (class created for CSS). In big projects you must use very long names for classes, its very inconvenient.
Get element by his number (index) - when adding a new element, you must rewrite old numbers in your code.
I see a couple of options:
If you don't want to use class , you can use a data-* attribute.
Assuming you load the template once and then duplicate its contents as desired, you could put id values on the elements in the template, which you then remove when cloning them and adding them to the document (so you don't end up with the same id on more than one copy of the element, which would be invalid and probably counterproductive).
Maybe you can also create as many templates as you need.
One for each div.
If you need to get each div at a time you must set ids to them ... of course you can also browse the dom inside script element to find the one you're interested in ...
Home this helps
Regards
mimiz

Categories