Using regular expressions to eliminate the width attribute from tables

Currently, I am carrying out some HTML processing before storing the data in the database. If a user pastes content containing HTML tables, I need to eliminate certain tags and attributes.

To extract the table content, I am using 

content.match('<table[^>]*>(.*?)</table>')
. The content includes a width tag as an attribute and also within a style tag. Example: 
<table width="462" style="border-collapse: collapse; width: 348pt;">
.

My goal is to transform the content to something like 

<table style="border-collapse: collapse;">
. However, I do not want to remove the width attribute or tags inside tr and td. Can anyone recommend a suitable regex pattern for achieving this?

javascripthtmlcssregex

Answer №1

If you are able to isolate the <table...> token on its own, then the regular expression below will identify all instances of the width attribute that are not preceded by a minus sign:

/(?:[^\w-])width\s*(=\s*(["'])[^"']+\2\s*|:\s*[^;]+;)/g

Make sure to replace the matched text with a space.

Answer №2

discover: 

(<table[^\>]*) width="[^\"]*"

substitute with: 

\1

explanation

(<table          :  locate all '<table'...
[^\>]*)          :  until first appearance of a closing lace brace
 width="[^\"]*"  :  locate ' width="' until first appearance of a quotation mark,
                    select everything, and close it with a quotation mark

regex container preview

cheers, poli

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

Having trouble getting the Bootstrap navbar mega menu to function properly on an Asp.Net Core platform

I attempted to incorporate a Bootstrap navbar mega menu dropdown into my layout using the code from this source: However, after downloading and inserting the code into my layout, the mega menu does not expand or take any action when clicked. In the Chrome ...

javascripthtmlcssasp.net-corebootstrap-4

My ReactNative Android application is experiencing significant lag, is there anyone who can assist me in resolving this issue?

Currently, I'm tackling a reactnative android app project and have noticed a significant drop in performance. Unfortunately, I am clueless about the root cause of this issue. Could it be related to the navigator or are there other underlying factors a ...

javascriptreactjsreact-native

Simplify nested JSON data

I'm struggling with a JSON object that looks like this: const people = { name: 'My Name', cities: [{city: 'London', country: 'UK'},{city: 'Mumbai', country: 'IN'},{city: 'New York', country: ...

javascriptjsonnestedflatten

When the number of selected students exceeds zero, activate the collapsing feature in React

When the number of students exceeds zero, the collapse should automatically open and the text in Typography (viewStudentList) will display 'Close'. On the other hand, if the student count is zero, the collapse should be closed and the text on Typ ...

javascriptreactjsmaterial-ui

Despite the unconsumedBufferLength being 0, DataReader.loadAsync is still being completed

Working on UWP WinRT, I'm dealing with JSON stream consumption using the following code: async function connect() { let stream: MSStream; return new CancellableContext<void>( async (context) => { stream ...

javascripttypescriptwindows-runtime

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

My initial junior UI/UX assignment: Can you confirm whether this form modal dialog is pixel-perfect, and offer any suggestions for improvements

Currently diving into my first project as a Junior UX/UI Designer. Coming from a background in software engineering, I decided to challenge myself by focusing on design. I'm seeking feedback on the pixel perfection of this modal window, which my seni ...

javascriptcssmodal-dialogpixelphotoshop

Issue with swal() not triggering in Internet Explorer 11

Looking for some assistance here, I believe I might be missing a small detail. The _layout.cshtml file includes all the necessary scripts to ensure that sweetheart works on IE: (this used to work in previous versions, but we haven't had to support I ...

javascriptinternet-explorersweetalert2

Wait for the playwright to detect a specific and exact change in the inner text

There is a specific innerText that transitions from Loading to Play after 2-3 seconds. I want to wait for this change to happen before proceeding. Currently, I am using the following code snippet: let attempt = 0; let maxRetries = 4; let payerButtonStatus ...

javascriptnode.jsplaywright

I am completely baffled as to the origin of this mysterious stylesheet in my Wordpress PHP code

I have been encountering an issue while updating my website where the original stylesheet seems to be persistent despite my efforts to replace it. I replaced the style.css file in my bluehost control panel and removed any custom css settings, but the old s ...

phpcsswordpress

Issue with prop inheritance in componentInheritance problem with passing props to

How can I pass the state function setMyChoice as a prop to the GamePlay component in a rock paper scissors Nextjs application? The goal is to produce a value for comparison. In the Gameplay component, I then pass a prop to another component called PlayButt ...

javascriptreactjsnext.js

Loop through and display content on the webpage with a for loop

I'm attempting to create a loop that will display information in three different areas of the DOM. Essentially, I have an array of enemies and I want to randomly select three of them to display in separate HTML div classes (firstEnemy, secondEnemy, th ...

javascriptarraysdom

"Exploring the World Wide Web with Internet Explorer Driver and Webdriver

After trying everything I know to make internet explorer work with webdriver.io, I've encountered a confusing issue. To start, download the internet explorer driver from this link: http://www.seleniumhq.org/download/. The file is an .exe named ' ...

javascriptseleniumwebdriver

What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution. The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second ...

htmlcsscross-browsercss-position

Error: The module could not be found due to an inability to resolve the parsed request

I am working on a project that uses class components as a requirement by the company, and I cannot switch to function components. After running elint --fix and restarting the project, I encountered an error that is specific to just one file. The error me ...

javascriptreactjsreact-reduxeslintnode-modules

Aligning hyperlink with full-height image within a table cell (navigation buttons)

I am currently working on creating a traditional navigation bar that occupies 20% of the screen width and consists of 3 buttons. Each button is supposed to have an icon that is centered both vertically and horizontally. Additionally, I want the buttons to ...

javascripthtmlcss

Exploration of the "display: none;" property and loading of content

I am struggling to find concrete information on how "display: none;" affects content loading. I have always believed that certain browsers do not load external resources within content that is styled with "display: none". Is this still inconsistent across ...

htmlcss

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

Navigating URLs to Single Page Application Routing in Vue.js

I'm new to using vue-router and I'm curious if there's a way to manage redirection in Vue or if there are alternative methods in a node.js environment. For instance, when someone tries to access my site by typing the URL example.com/contac ...

javascriptvue.jsvue-router