Extract the <br /> tag exclusively from the content inside the div

Question

Extract the <br /> tag exclusively from the content inside the div

My experience with WooCommerce has led me to the need to include

    <br>

within a product name.

However, this break appears differently as

    <br />

in the .woocommerce-breadcrumb element.

This is what the breadcrumb currently displays:

    <nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
        <a href="http://localhost/WP">Home</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/">Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/">Electric Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/fender-electric-guitar/">Fender-123-electric-guitar</a>
        &nbsp;&#47;&nbsp;Fender American Standard&lt;br /&gt; Stratocaster Sienna Sunburst
    </nav>

In the browser, the last line before the nav shows the break as < br / > literally.

Currently, I am attempting a solution to remove it, but it interferes with the breadcrumb's functionality!

  $(function() {
      $( '.woocommerce-breadcrumb' ).text(function(_,txt) {
          return txt.split('<br />').shift();
      });
  });

Any suggestions or advice would be greatly appreciated!

Thank you!

jquery html css wordpress woocommerce

Answer 1

Answer №1

text function is considered to be destructive because it resets the content of the element where it is applied. One way to work around this is to iterate through the child nodes and modify the node values directly.

$( '.woocommerce-breadcrumb' ).contents().each(function() {
    if ( this.nodeType === 3 ) {
       this.nodeValue = this.nodeValue.replace(/<br \/>/g, '');
    }
});

You can check out a working demo here

Answer 2

text function is considered to be destructive because it resets the content of the element where it is applied. One way to work around this is to iterate through the child nodes and modify the node values directly.

$( '.woocommerce-breadcrumb' ).contents().each(function() {
    if ( this.nodeType === 3 ) {
       this.nodeValue = this.nodeValue.replace(/<br \/>/g, '');
    }
});

You can check out a working demo here

Extract the <br /> tag exclusively from the content inside the div

Answer №1

Similar questions

Developing a server-side handler for jQuery file upload

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

Printing from a Windows computer may sometimes result in a blank page

The dual-file upload feature of the jQuery ajaxForm plugin

Clicking on a radio button can trigger the selection of another radio button

Adding text can only be done to the initial list item

Align section titles to the right of the screen in Zurb Foundation 4

The full height of the image cannot be captured by html2canvas

Place the child DIV at the bottom of its parent DIV

What could be causing the discrepancy in alignment of my hyperlink?

AngularJS: Utilizing bold text to enhance the separation of concerns between controllers and templates

The page switch with a jittery effect

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

Unable to retrieve file name with Jquery Ajax and PHP due to error

Transferring information from an HTML page to a PHP script

Using spin.js instead of an animated gif provides a sleek and modern alternative for adding loading

AngularJS postback method fails to trigger

Implementing customized line breaks in PHP using custom fields

Text successfully inserted into the input field using Xpath

Moving and adjusting positions with draggable elements