CODEWITHSUNDEEP
javascripthtml
Yann B
Yann B

Reputation: 33

Getting text content of a div element excluding its children

I have the following HTML code and I need to console.log only Shipping. I tried a few methods but can't seem to get it to work. I tried selecting first its children and printing out the textContent of its parent - no go. I could delete its children and print out what's left but I can't do that.

Any suggestions?

<div class="accordion shadowed-box shipping collapsed summary">
  <fieldset>
    <legend>
    Shipping
        <div id="shippingTooltip" class="form-field-tooltip cvnship-tip" role="tooltip">
          <span class="tooltip">
            <div class="tooltip-content" data-layout="small tooltip-cvn">
              <div id="cart-checkout-shipping-tooltip" class="html-slot-container">
                <p>We ship UPS, FedEx and/or USPS Priority Mail.<br>  
                  <a class="dialogify" data-dlg-options="{&quot;height&quot;:200}" href="https://www.payless.com/customer-service/ordering-and-shipping/cs-ordering-shipping-schedule.html" title="shipping information">Learn more about our shipping methods and prices.</a>
                </p>    
              </div> 
            </div>
          </span>
        </div>
      <a href="javascript:app.checkout.editShipping();" id="section-header-note-sa" class="section-header-note" style="display: inline;">Edit</a>
    </legend>
  </fieldset>
</div>

I tried this:

var accordionChildren = document.querySelector('.accordion.shadowed-box.shipping>fieldset>legend *');//selects the first child
var accordionTitle = accordionChildren.parentElement;
var text = accordionTitle.textContent;
console.log(text);

I want to get Shipping but instead I get still all the text contents of the legend element.

Upvotes: 3

Views: 1967

Answers (3)

0bero
0bero

Reputation: 1062

You can get the contents of the <legend> tag as a string and then use a regular expression to remove the HTML tags and their content inside. Like this:

let legends = document.querySelector('.accordion.shadowed-box.shipping>fieldset>legend');
let title = legends.innerHTML.replace(/<.*/s, '');
// title = "Shipping"

The regular expression matches the first < character and everything that follows. So we replace that match with an empty string ''.

Upvotes: 1

mexn
mexn

Reputation: 88

you can access Text nodes by iterating over the child nodes (or access the intended node directly) of the accordionTitle variable.

let textNode = accordionTitle.childNodes[0],
    text = textNode.textContent;

console.log(text);

See https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes and https://developer.mozilla.org/en-US/docs/Web/API/Text

Upvotes: 4

wiesion
wiesion

Reputation: 2435

You just need to find the TextNode child from all of the elements children, you do this by iterating over all of the childNodes and when the node type matches TextNode, return its textContext.

For a jQuery based solution on how to pick the TextNode child of an element see this question - but my example shows how to do it in vanilla ES (with a for loop over childNodes):

Object.defineProperty(HTMLElement.prototype, 'onlyTextContent', {
  enumerable: false,
  configurable: false,
  get: function() {
    for(let i = 0; i < this.childNodes.length; i++) {
      if(this.childNodes[i].nodeType === Node.TEXT_NODE) {
        return this.childNodes[i].textContent.trim();
      }
    }
    return null;
  }
});

document.addEventListener('DOMContentLoaded', function() {
  console.log(
    document.getElementById('legend1').onlyTextContent
  );
});
<div class="accordion shadowed-box shipping collapsed summary">
  <fieldset>
    <legend id="legend1">
    Shipping
        <div id="shippingTooltip" class="form-field-tooltip cvnship-tip" role="tooltip">
          <span class="tooltip">
            <div class="tooltip-content" data-layout="small tooltip-cvn">
              <div id="cart-checkout-shipping-tooltip" class="html-slot-container">
                <p>We ship UPS, FedEx and/or USPS Priority Mail.<br>  
                  <a class="dialogify" data-dlg-options="{&quot;height&quot;:200}" href="https://www.payless.com/customer-service/ordering-and-shipping/cs-ordering-shipping-schedule.html" title="shipping information">Learn more about our shipping methods and prices.</a>
                </p>    
              </div> 
            </div>
          </span>
        </div>
      <a href="javascript:app.checkout.editShipping();" id="section-header-note-sa" class="section-header-note" style="display: inline;">Edit</a>
    </legend>
  </fieldset>
</div>

Upvotes: 2

Related Questions