We Keep Coding

Get div value from class name

I have a very large HTML that contains lots of divs with the same name, I want a way to only filter or extract that value from that div.
Here is an example:
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>
I need to extract only what's between <John Appleseed>, in this case is 'John Appleseed'.

You could use querySelectorAll to take all the elements with class name, then get the title attribute with getAttribute, and finally use a regular expression to match text between <>.
document.querySelectorAll('.name').forEach(item => {
let title = item.getAttribute('title');
console.log(title.match(/\<.*\>/));
});
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>

var divs=[];
for(i=0,j=0,obj=document.getElementsByClassName("name");i<obj.length;i++)
if(obj[i].title.includes("John Appleseed") &&
/* obj[i].title.split("\"")[2].trim()=="<John Appleseed>" && */
obj[i].tagName.toLowerCase()=="div"){
divs[j++]=obj[i];
}
console.log(divs);

separate your div using div ID. Then get your respective div using that value of ID. Then in javascript you can use getElementByID.

You can use Xpath,
.//div[contains(#class, 'Test')]
Then extract you required text from it.

Remove spans from html with a class but keep the text [duplicate]

This question already has answers here:
Remove a HTML tag but keep the innerHtml
(7 answers)
Closed 4 years ago.
If I had the following html:
<div id="main">
This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>
How would I remove all spans that have the class class-one?
The expected output from the above html would be:
<div id="main">
This <span class="class-two">is</span> a string and I want to remove spans <span>with a</span> class
</div>
The class-two and the span without a class haven't been removed.
I also need to save the new html string into a variable which is the part I am struggling with.
Something like this:
var html = $('#main').$('.class-one').replaceWith((i, txt) => txt);

Select #main, and find .class-one. Use .replaceWith() with a function to replace with the text. Then use .end() to return to .main and get the .html():
const result = $('#main')
.find('.class-one')
.replaceWith((i, txt) => txt)
.end()
.html();
console.log(result);
.class-one {
color: red;
}
.class-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>

jQuery : Split the DOM Node using jQuery

My problem is to split the Dom element using jquery.
<span class="start">
<span class="second">
new text <span class='split'>is written</span> in this place.
</span>
</span>
And I want to Split the above DOM Like this.
<span class="start"><span class="second">new text</span></span>
<span class="start"><span class="second">is written</span></span>
<span class="start"><span class="second">in this place.</span></span>
Please, anybody give me some advice.

One way to do it would be:
last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text
$('.second').html(' '); //clear current html
cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);
Demo:
last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text
$('.second').html(' '); //clear current html
cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="start">
<span class="second">
new text <span class='split'>is written</span> in this place.
</span>
</span>
P.S. If there are no classes (i guess that could be the case), you will have to use different selectors, to target spans (inside container?), with eq(), maybe, but, basically, this simple logic should work...

Just delete the normal text, but not the span element

I want to clear out the "normal text", but no glyphicon's.
The important code sections and its results:
$("#btn_test").html() will give me:
"<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span> Speichern & schließen"
$("#btn_test").text() will give me:
" Speichern & schließen"
I just want to delete the text "" Speichern & schließen", without .replace(...)-function (because the text is dynamic).
I tried $("#btn_test").text(""), but this will clear also my span element.
Thank you.
Updated('possible duplicate'):
Yes, it is the same question like here, but not the answer of Chris Davis, which solved my problem.

Remove the text node, e.g:
$('#btn_test').contents().filter(function(){
return this.nodeType === 3;
}).remove();
Or simpler, if it's always the last:
$('#btn_test').contents().last().remove();
-jsFiddle-

Simplest way would be to wrap your text in a span — it then becomes trivial to remove this text.
$(document).ready(function() {
$('#btn_test .text').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_test">
<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span>
<span class="text">Speichern & schließen</span>
</button>
jsFiddle link

wrapping div around string using jquery

How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.

You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');

$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?