Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/
Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();
If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();
jQuery .remove() will do
$("#div2").remove();
The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.
Related
I am currently working on a page that requires filling a div programmatically with a bunch of HTML like this sample code
<div id="Element">
<div class="tooltiptext top both">
<div class="editorMenuButton">
<span>Editor Menu</span>
<img src="https://github.com/..." />
</div>
<div class="diceButton">
<img src="https://github.com/..." />
</div>
</div>
</div>
right now, I am doing this as follows
Element.innerHTML = "<div class='tooltiptext top both'><div class='editorMenuButton'><span>Editor Menu</span><img src='https://github.com/...' /></div><div class='diceButton'><img src='https://github.com/...' /></div></div>";
which definitely works, but using a string to pass HTML seems like probably not the right/best/professional way to do it. Is there a better way?
Thanks!
Without involving any external libraries/frameworks, plain javascript allows you to create elements:
var mydiv = document.createElement('div');
see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement ]
You can add various properties as needed:
mydiv.className = 'tooltiptext top both';
see https://developer.mozilla.org/en-US/docs/Web/API/Element
Then append these created elements to other elements
Element.appendChild(mydiv);
see https://developer.mozilla.org/en-US/docs/Web/API/Element/append
There are several libraries that make this a bit easier such as metaflux
Well, in some cases make sense to use a string, but if you need something more structured, you may use document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
I have to convert plain text urls to . I've found a JS code that works. My problem is that my HTML structure needs that I modify the code, putting the current code inside a foreach.
My html:
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
The JS:
$(function()
{
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$('.content').html($('.content').html().replace(re, '$1'));
});
The above JS works, but will populate all the div's with the same content. I've tried to put this code in a foreach but have failed. My poor JS knowledge makes me ask this on SO.
Can you give some clues on how to put this code in a foreach loop?
Functions like .html allow a function to be passed. An .each loop is then done internally, and moreover you get the current value passed:
$('.content').html(function(i, current) {
return current.replace(re, '$1');
});
.html() for retrieval only selects the first matched element. You can do this pretty easily, though, because functions like .html can take a function argument for setting that iterates over each selected element individually.
$(".content").html(function (_, html) {
return html.replace(re ...etc...);
});
If I've understood your question correctly, you need to loop through each .content div, try this:
$('.content').each(function() {
var $content = $(this);
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$content.html($content.html().replace(re, '$1'));
});
I'd like to get the text from between the "p" tags and put it in an other element, like this:
before:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p></p>
</div>
after:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p>$1,200.00</p>
</div>
Anyone know of a Javascript that can do this?
The below function copies the contents of the first paragraph under an element with ID ID to a paragraph under another element with ID putID.
function copyContents(id) {
var source = document.getElementById(id).getElementsByTagName("p")[0];
var target = document.getElementById("put" + id).getElementsByTagName("p")[0];
target.innerHTML = source.innerHTML;
}
copyContents("Text");
you can use following jQuery code
$('#putText p').html($('#Text p').html());
If you have jQuery at your disposal, it's fairly easy - something like this should work:
$('#putText>p').text($('#Text>p').text())
If you don't, then you'll have to resort to some DOM manipulation - the same stuff jQuery does behind the scenes, only you need to code it up yourself.
How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?
<div class="adding">
<b>
<div class="column">
<div class="mediumCell">
<input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
</div>
</div>
<div class="column" style="margin: 5px 3px;">
<div class="mediumCell">
<div class="adda">
</div>
</div>
</div>
</b>
</div>
var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"></div></div></div></b></div>'
In each click I want to get the content just once.
Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).
I tried this:
$(function () {
var i = $('.adding').size();
$('.add_input').live('click', function () {
var scntDiv = '.' + $(this)
.closest('.find_input')
.find('div')
.attr('class');
var input = $(scntDiv).html();
$(this).remove();
$(input).appendTo(scntDiv);
i++;
return false;
});
});
You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.
Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():
var adding = $("div.adding").clone().wrap("<div>").parent().html();
You can get the inner HTML using the html function:
var adding = $(".adding").html():
...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.
However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing(tm), it's much better with dynamic web apps to ensure that your HTML is valid.
Is that what you're asking for ?
var adding;
$('.adding').click(function(){
adding = $(this).html();
alert(adding);
});
var adding = $(".adding").html();
maybe?
Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:
<div id='contentdiv'>bla content bla</div>
and I want to wrap it in the following way:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
I use the following jQuery/Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
This however will not result in the correct wrapping, it will create:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Using wrap() won't work either since that gets jQuery even more mixed up when using:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
How should I solve this?
Thanks in advance!
$('#contentDiv').each(function() {
$(this).wrap('<div id="wrapperDiv">');
$(this).before('<div id="beforeDiv">');
$(this).after('<div id="afterDiv">');
});
produces:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
your markup isn't complete...before and after are to take complete nodes only...
what you are trying to do is wrap your content, which is different.
you want this:
.wrap(html);
http://docs.jquery.com/Manipulation/wrap#html
I think you're approaching it wrong. Think about what you actually want to achieve...
You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.
so do .wrap() first, then append before and after-divs relative to the content-div.
if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.
I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}