How to retrieve the name of a node using partial text in JavaScript

Question

How to retrieve the name of a node using partial text in JavaScript

I am looking for a way to separate values into key-value pairs before and after a specified delimiter (:) in JavaScript.

For example:

Product Name: Product 15

Product code: 1234

If I search for "product," I want to retrieve the product name and product code as keys, and their respective values (Product 15 and 1234).

var text1=document.documentElement.innerHTML;
var res = text1.match(/Product/g);

for(j=0;j<res.length;j++)
{
   console.log(res[j]);
}

   <li>Product name: Product 15</li>
   <li>product code: 1200</li>
   <span> product category : bag </span>

javascript tags

Answer 1

Answer №1

Retrieving the HTML string from the DOM using

document.documentElement.innerHTML;

and searching it can make it challenging to navigate back to the parent node due to lack of a node relation. It is advisable to identify the necessary elements for search and iterate over them for efficient searching.

Instead of using text1.match to find matching words in the text, opting for regex.test will help determine if the required word or pattern exists. It is important to execute this on individual texts rather than on the complete HTML string to retain information about the parent node.

var elements = document.querySelectorAll("li,span");
var regex = /product/i

for (var j = 0; j < elements.length; j++) {
  var text = elements[j].textContent;
  if (regex.test(text)) {
    console.log(text);
  }
}

<li>Product name: Product 15</li>
<li>product code: 1200</li>
<span> product category : bag </span>

Answer 2

Retrieving the HTML string from the DOM using

document.documentElement.innerHTML;

and searching it can make it challenging to navigate back to the parent node due to lack of a node relation. It is advisable to identify the necessary elements for search and iterate over them for efficient searching.

Instead of using text1.match to find matching words in the text, opting for regex.test will help determine if the required word or pattern exists. It is important to execute this on individual texts rather than on the complete HTML string to retain information about the parent node.

var elements = document.querySelectorAll("li,span");
var regex = /product/i

for (var j = 0; j < elements.length; j++) {
  var text = elements[j].textContent;
  if (regex.test(text)) {
    console.log(text);
  }
}

<li>Product name: Product 15</li>
<li>product code: 1200</li>
<span> product category : bag </span>

Answer 3

Answer №2

 var items=[];
 $('li').each(function(e){var e_text = $(e).text().split(':'); items.push({[e_text[0]]:e_text[1]})});

// display results
console.log(items);

JavaScript

var options = document.getElementsByTagName('li');
var items=[];
Array.from(options).forEach(function(ele){var ele_text = ele.innerText.split(':'); items.push({[ele_text[0]]:ele_text[1]})})

// display results
console.log(items);

Answer 4

 var items=[];
 $('li').each(function(e){var e_text = $(e).text().split(':'); items.push({[e_text[0]]:e_text[1]})});

// display results
console.log(items);

JavaScript

var options = document.getElementsByTagName('li');
var items=[];
Array.from(options).forEach(function(ele){var ele_text = ele.innerText.split(':'); items.push({[ele_text[0]]:ele_text[1]})})

// display results
console.log(items);

How to retrieve the name of a node using partial text in JavaScript

Answer №1

Answer №2

Similar questions

AngularJS xeditable: sending updated data to the server

Learning to retrieve specific properties from an event target in JavaScript

Crafting personalized objects from an array

One potential solution is sending a message to a user via a server using JavaScript on Node.js

"Exploring the Depths: How Node.js Utilizes Recursive Calls

Encountering issues with Monaco Editor's autocomplete functionality in React

Implementing dynamic width with ng-style in AngularJS

React.js: Dynamically Highlighting Menu Items Based on Scrolling位置-GaidoWhen a

Tips for updating Nodejs' module dependency to a newer version

The alignment of the Slick slider item appears off-center when viewed on a mobile device

Limit the usage of map() to solely operate on a collection of headers stored within an array generated from a specified range

What causes parameters to be initially passed as undefined when sending them from one component to another, only to later arrive with the actual data intact

Incorporating video.js into an Angular website application

Encountering unidentified data leading to the error message "Query data must be defined"

I encountered a difficulty trying to assign a value to @Input decorators in the spec file

Troubleshooting a VueJS Problem: Updating $data in the mounted hook

Why do the async functions appear to be uncovered branches in the Jest/Istanbul coverage report?

What could be causing me to receive 'undefined' and an empty array[] when using Promise.all with JavaScript async operations making calls to Azure APIs?

Restricting the drop zone for a jqueryui sortable element

Switching measurement unit to jQuery when retrieving image weight