How can I strip out HTML attributes from a String?

Looking for a solution to remove specific id attributes from an HTML string? Here's the scenario:

<div id="demo_..." class="menu">

You have the HTML code as a string and want to remove all id attributes starting with demo_. The desired result is:

<div class="menu">

While you know that regular expressions can help with this task, tackling special characters can be challenging. What should the regular expression look like to successfully replace all strings with this patter with an empty string?

javascriptcss-selectors

Answer №1

If you're looking to target specific elements using substring attribute selectors, you have a few options:

[att^=val] - This represents an element with the attribute "att" whose value starts with "val". If "val" is empty, the selector won't match anything.

[att$=val] - This targets elements with the attribute "att" whose value ends with "val". Again, if "val" is empty, it won't find any matches.

[att*=val] - This selects elements with the attribute "att" that contain the substring "val". An empty "val" won't match anything.

To apply this to your scenario, you can use:

document.querySelectorAll('[id^="demo_"]')

or

document.querySelectorAll('[id*="demo_"]')

This will give you an array of HTMLElements with the "id" attribute starting with or containing "demo_". You can then remove the "id" attribute using the removeAttribute() method. Learn more about this method here.

document.querySelectorAll('[id^="demo_"]')
 .forEach(element => element.removeAttribute('id'));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid triggering react-query to fetch data on page load, but instead set up a manual refetching mechanism

Currently, I'm utilizing react-query v3.13 for retrieving information from an API. Instead of fetching data immediately when calling useQuery, my goal is to fetch the API periodically starting from a specific point (such as clicking a start button). ...

javascriptreactjsfetchreact-queryswr

Lack of Ajax query string parameters

To implement a functionality where clicking on a delete button in the UI triggers a service method that retrieves data from a database and displays it in a popup, I need to call a specific method in an Action class. The task id and command name (method nam ...

javascriptajaxstruts-1

Leveraging CasperJS in a typical JavaScript script

I am currently working on a NodeJS project that involves integrating CasperJS. However, I have encountered an issue where the 'casper' module cannot be located. In an attempt to resolve this, I decided to npm install spooky --save based on some s ...

javascriptnode.jscasperjsspookyjs

Deciphering HTML within a Vue attribute: Tips and tricks

I'm having trouble converting some code to Vue. There seems to be a rendering difference in the alt attribute of an image, and I can't figure out how to interpret the html within the attributes. I've searched for solutions but haven't f ...

javascriptimagevue.jsvuejs2vue-component

Verify the type of email domain (personal or corporate)

Here's an example: isPersonalEmail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aea1ada580a7ada1a9aceea3afad">[email protected]</a>") // true isPersonalEmail("<a href="/cdn-cgi/l/email- ...

javascriptnode.jstypescriptemailnpm

How to fetch and display images using Vue.js with Axios and a web API

I have managed to successfully upload an image using axios and can preview it in Postman. However, I am unsure of how to proceed with rendering the image in vuejs. Implementing the Get Method: public HttpResponseMessage FetchImage(int id) { ImageServ ...

javascriptc#asp.net-web-apivue.jsaxios

"Encountered an error: File or directory not found while attempting to export a function

src/test.js module.exports.test = function() { const { readFileSync } = require('fs'); console.log(readFileSync('test.txt', 'utf8').toString()) } index.js const { test } = require('./src/test.js'); test(); ...

javascriptnode.js

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

I have a funky looking table on my webpage, here's an example: <body> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Product name</th> <th>Product ...

javascript

Utilizing PHP, Javascript, and jQuery in mobile technology gadgets

Can anyone recommend mobile technology products that have been developed using PHP, Javascript, and jQuery? What are the newest mobile products available on the market that have been built using these languages? Do popular devices like iPhone, BlackBerry ...

phpjavascriptjquery

What is the best way to store and serve the AngularJS library locally in a static manner?

I have a project in Angular that needs to be developed without an internet connection, which means the CDN links will not work. I want to save the AngularJS library to a directory within my project. This is what I attempted: First, I visited the CDN link, ...

javascriptangularjsstatic-librarieslibraries

If the storeAlertPresent condition is not true in Selenium IDE, then proceed to the next

I am facing a challenge with testing an insurance policy admin system that involves entering policy holder information using a custom extension that generates random individuals, including vehicle VINs pulled from Polk verified VINs. The system I am creati ...

javascriptseleniumselenium-ide

What could be the reason for TypeScript being unable to recognize my function?

In my code, I have a Listener set up within an onInit method: google.maps.event.addListener(this.map, 'click', function(event) { console.log(event.latLng); var lt = event.latLng.lat; var ln = event.latLng.lng; co ...

javascriptgoogle-mapsangulartypescript

What is the proper way to include onMouseOver and onMouseEnter events in a reactjs project

Seeking assistance with implementing the onMouseOver event in React, but encountering issues. I have followed the correct procedures for using, calling, and setting State. Please review my code and provide guidance. import React from 'react'; c ...

javascriptreactjs

Implement pagination for API calls within a React Component

I am trying to implement pagination for the results of an API call. The following code snippet shows how I am making the API call using Axios: apiCall() { const API = `http://www.omdbapi.com/`; axios.get(API, { params: { apikey: proces ...

javascriptreactjsrestpaginationaxios

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

Manipulate values within an array when a checkbox is selected or deselected

I am developing an Angular application where I have created a checkbox that captures the change event and adds the checked value to an array. The issue I am facing is that even if the checkbox is unchecked, the object is still being added to the array. D ...

javascriptangulartypescriptcheckboxangular6

The error message 'ReferenceError client is not defined' is indicating that the

I'm currently attempting to retrieve the id of clients connecting to my socket.io/node.js server by following the method outlined in the top response on how to get session id of socket.io client in Client. However, I am encountering an error message: ...

javascriptnode.jssocket.ioclientreferenceerror

Set up a single array containing multiple objects in a table, each with its own unique set of keys

I am currently developing an application that retrieves data from one or multiple databases, each with different names and varying numbers of columns. The goal is to consolidate this data into a single report screen and export it as a table. While the tabl ...

javascriptreactjsarraysjsonjavascript-objects

When you hit the enter key in a text input field in JavaScript, it triggers a specific function

http://codepen.io/abdulahhamzic/pen/YqMQwB Is there a way to make it so that when I hit the enter key on a text input, it triggers a specific function? I attempted to achieve this using the following code: <input type="text" onkeypress=" ...

javascripthtmlcss

Fixing a JavaScript conflict between the parent theme and the child theme in WordPress

Recently, I created a customized child theme based on the Divi Theme, tailor-made for integration with Buddypress. Everything was going smoothly until I encountered a conflict involving the commenting buttons due to a script. In my theme, there is a JavaS ...

javascriptajaxwordpresswordpress-themingbuddypress