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

Vue.js: Attaching a function to a Template

"NgFor can only bind to Array objects - troubleshoot and resolve this error

Swapping out image sources using a React Hook that includes an onClick event

Storing and Retrieving Mongoose Data Using Nested Schemas, References, and Promise Functions

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

Create a fresh trail underneath the overlay image

Steps for transforming 112889 (in mmddyy format) into 11/28/89 or 11/28/1989

Refresh a particular element using javascript

issues with jquery functionality on user control page

Error in material mapping: glDrawElements is trying to access vertices that are out of range in attribute 2

Customizing the renderInput of the Material UI DatePicker

Javascript Encapsulation example

What's the reason behind the refusal of my connection to localhost at port 3000 in Node.JS?

Loading two different models is not possible with ColladaLoader

Unexpected behavior encountered in Rails app with unobtrusive JavaScript

What is the best way to adjust text across several lines to perfectly fit within a div's width?

Adding a characteristic to every item in an array of objects

Utilize a map image as a texture on a plane within a personalized shader in THREE.js

Iterate over a JSON document, insert an item, and then store the updated data in a separate

Completing the regex properly