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

How to retrieve data from a form object sent via cloud function using App Script

The logo image dynamically switches as the user scrolls through various colored sections

Explore the Benefits of Using MUI V5 Grid Component for Your Box Design

Is there a way to create an infinite fade in/out effect for this?

When I request the value of a JavaScript object, I am met with 'undefined'

Accessing Struts2 tag attributes with JavaScript

I'm having trouble with my .Refine feature when attempting to create a conditional input field. Can anyone help troubleshoot this issue?

React Native: Struggling with Button Styling

I'm facing issues with Angular commands not functioning properly even after installing the Angular CLI and configuring the

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Eliminable Chips feature in the Material UI Multiple Select component

Connecting a href link to a TAB

Updating a value in Expressjs variable is not working as expected

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

Using Node.js to create a RESTful API that pulls information from MongoDB

Downloading a file through a JavaScript link in HTMLUnit: A step-by-step guide

Give a jQuery Mobile flipswitch a new look

Identifying when a user closes a tab or browser to trigger a logout in JavaScript with Vue.js using the Quasar framework

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript