Navigating through the DOM using JavaScript or regular expressions

Question

Navigating through the DOM using JavaScript or regular expressions

I have a DOM string called innerHTML and I am looking to extract or display the node value using either JavaScript's DOM API or JavaScript RegEx.

"<nobr>
<label class="datatable-header-sortable-child" onmousedown="javascript:giveFeedback('dtl_body_',6,event);" onmouseup="javascript:sortTable('dtl_body_',6,event);">Name<img id="dtl_body_img_6" src="xyz.jpg">
<input id="dtl_body_cmp_6" value="compareCaseInsensitiveStrings" type="hidden">
</label>
</nobr>"

This is my approach. I have a table with cells[i] representing each cell within a for loop, where the condition checks if each cell contains "Name".

if(cells[i].childNodes[0].innerHTML.replace(/(\r\n|\n|\r)/gm ,"").trim() == "Name")
    {
    /*Do SomeThing */
    }

Are there alternative methods to obtain the nodevalue or any recommendations for utilizing RegEx?

javascript regex

Answer 1

Answer №1

Instead of using the innerHTML, you should use the textContent property, which contains just the text content.

cells[i].childNodes[0].textContent.trim() == "Name"

This should work for your situation.

Answer 2

Instead of using the innerHTML, you should use the textContent property, which contains just the text content.

cells[i].childNodes[0].textContent.trim() == "Name"

This should work for your situation.

Answer 3

Answer №2

To dynamically create a DOM using JavaScript, you can utilize Document Fragment [0] and then apply methods like querySelector, querySelectorAll, getElementById, etc. to retrieve values. In your scenario, the code would look something like this:

var docFrag = document.createDocumentFragment();
var divWrapper = document.createElement('DIV');
divWrapper.innerHTML='<nobr>'+
    '<label class="datatable-header-sortable-child"  onmousedown="javascript:giveFeedback(\'dtl_body_\',6,event);" onmouseup="javascript:sortTable(\'dtl_body_\',6,event);">Name<img id="dtl_body_img_6" src="xyz.jpg">'+
     '<input id="dtl_body_cmp_6" value="compareCaseInsensitiveStrings" type="hidden">'+
     '</label>'+
      '</nobr>';
   docFrag.append(divWrapper);
   console.log(docFrag.querySelector('input').value)

[0] https://developer.mozilla.org/en/docs/Web/API/DocumentFragment

Answer 4

To dynamically create a DOM using JavaScript, you can utilize Document Fragment [0] and then apply methods like querySelector, querySelectorAll, getElementById, etc. to retrieve values. In your scenario, the code would look something like this:

var docFrag = document.createDocumentFragment();
var divWrapper = document.createElement('DIV');
divWrapper.innerHTML='<nobr>'+
    '<label class="datatable-header-sortable-child"  onmousedown="javascript:giveFeedback(\'dtl_body_\',6,event);" onmouseup="javascript:sortTable(\'dtl_body_\',6,event);">Name<img id="dtl_body_img_6" src="xyz.jpg">'+
     '<input id="dtl_body_cmp_6" value="compareCaseInsensitiveStrings" type="hidden">'+
     '</label>'+
      '</nobr>';
   docFrag.append(divWrapper);
   console.log(docFrag.querySelector('input').value)

[0] https://developer.mozilla.org/en/docs/Web/API/DocumentFragment

Navigating through the DOM using JavaScript or regular expressions

Answer №1

Answer №2

Similar questions

Transform C# ASPX to handlebars format

Tips for monitoring a variable within a Service using a Controller to trigger a modal?

Scroll-triggered closing of modals in Next Js

Getting the Image Dimensions from a Base64 Encoded String

Tips for concealing tick labels in d3 using TypeScript

Error: selenium web driver java cannot locate tinyMCE

How do I convert the object value/data to lowercase in JavaScript using underscore for an HTML5 document?

Verify if there is a date present within the JSON entity

Struggling with obtaining react-modal in my React Component

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

What is preventing my Button's onClick() method from being effective?

Endless cycle due to $digest in AngularJS

"Encountering a "404 Error" while Attempting to Sign Up a New User on React Application - Is it a Routing or Port Problem

Implementing AJAX in Rails for the new/create action can greatly enhance the user

Displaying colors using Javascript

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

The calculator is experiencing issues with JavaScript functionality

Having trouble running Protractor with the Angular Seed Basic app in AngularJS?

Discover an Effective Approach for Transmitting Form-Data as a JSON Object