Strip away all HTML attributes within a string

I am in the process of developing an internal tool that allows a designer to input exported svg code into a text area and have the html code displayed in a syntax highlighter ()

When they paste their code like this

<svg xmlns="http://www.w3.org/2000/svg" width="18.135" height="12.365" viewBox="0 0 18.135 12.365">
  <path id="Path_4" data-name="Path 4" d="M10.067,5.649a8.054,8.054,0,0,1,7.27,4.534,8.1,8.1,0,0,1-14.541,0,8.054,8.054,0,0,1,7.27-4.534m0-1.649A9.749,9.749,0,0,0,1,10.182a9.741,9.741,0,0,0,18.135,0A9.749,9.749,0,0,0,10.067,4Zm0,4.122a2.061,2.061,0,1,1-2.061,2.061,2.062,2.062,0,0,1,2.061-2.061m0-1.649a3.709,3.709,0,1,0,3.709,3.709A3.715,3.715,0,0,0,10.067,6.473Z" transform="translate(-1 -4)"/>
</svg>

I aim to eliminate the widths, heights, and any id attributes linked with the pasted string similar to this

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.135 12.365">
  <path d="M10.067,5.649a8.054,8.054,0,0,1,7.27,4.534,8.1,8.1,0,0,1-14.541,0,8.054,8.054,0,0,1,7.27-4.534m0-1.649A9.749,9.749,0,0,0,1,10.182a9.741,9.741,0,0,0,18.135,0A9.749,9.749,0,0,0,10.067,4Zm0,4.122a2.061,2.061,0,1,1-2.061,2.061,2.062,2.062,0,0,1,2.061-2.061m0-1.649a3.709,3.709,0,1,0,3.709,3.709A3.715,3.715,0,0,0,10.067,6.473Z" transform="translate(-1 -4)"/>
</svg>

To achieve this, I am utilizing Vuejs and would prefer using JS or jQuery to tackle this challenge. Despite attempting various methods with JS, I have not been successful in removing these attributes.

javascriptregexstringvue.js

Answer №1

Give this regular expression a shot:

\s*(color|font|size)="[^"]*"

Explanation:

\s*: matches any white spaces

(color|font|size): matches color, font, size, etc.

[^"]*: matches any character that is not a " repeated between 0 and an unlimited number of times

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

What is the best way to access the image source attribute within a directive?

Here's a straightforward image directive example: (function () { 'use strict'; angular .module('myapp') .directive('imageTest', imageTest); function imageTest() { var directive = { ...

javascriptangularjs

Modify the property of an element during execution

I am tasked with developing a button that can change the type of a chart component (e.g., from columns to pie) upon clicking. However, I am unsure how to implement this functionality within the component structure. The goal is to modify the :series-default ...

javascriptvue.jsvuejs2kendo-uivuejs3

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

Collecting the timestamp when the page is loaded and then comparing it with the timestamp when the form is

I have implemented an anti-spam time trap in my application (although I realize its effectiveness may not be 100%, it serves as a temporary solution) that functions as follows: 1) Upon loading a page, a hidden input is populated with a timestamp using Jav ...

javascriptjquerypythondjangodatetime

Confirm that only the days of the present month are eligible for selection

I have been given the responsibility of validating a date field that is populated when an invoice is created. The date field consists of a text box and three button objects allowing users to select a date from a calendar, input today's date, or remove ...

javascripthtmlvb.net

With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element. <!doctype html> <html> <button id="button"> random number </button> ...

javascripthtmlcss

Preventing child element clicks in Angular 5: A helpful guide

I have checked numerous references, but unfortunately haven't received any responses. That's why I have turned to this platform in hopes of improving my code with your assistance. I need to add an element with text on click. Currently, it works ...

javascriptangular

Is there a way to retrieve the text from an input field within a template?

Seeking guidance on extracting text from an input within a Vue template. Unsure of the proper approach to retrieve this information without using external sources. The Template: <template id="addmodal"> <div class="modal-mask"> ...

vue.js

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

javascriptcssbootstrap-4modal-dialog

"Exploring the use of conditional rendering in React to dynamically hide and show components based

I am currently immersed in the world of React/Redux, focusing on an e-commerce project. This particular application offers two payment methods: cash and card payments. On the product display page, both payment icons are visible. However, I am seeking a sol ...

javascriptreactjsredux

I am looking to enable dragging for specific columns in the table using [Vue.Draggable]

I am seeking a way to enable dragging of specific columns using this library. My goal is to have a header with two lines and restrict the drag functionality to certain columns only. Unfortunately, achieving this at present seems impossible. The handle sp ...

vue.jsvuedraggable

Having trouble getting my Jquery Ajax post request to work with JSON data

I am working on syncing data from my Phonegap app back to the server. I have a PHP script set up on the server to handle the incoming data and now I need to figure out how to post values from my App to this script. Currently, I store my data in a SQLite d ...

javascriptjqueryajaxcordovajquery-mobile

It is not possible in Vue.js to alter a data value from within a method

I've been struggling to figure out why the data value within a method won't change. Can someone help me with this issue? <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

firebasevue.js

PHP and AJAX: Combining Powers to Fetch Data

Greetings. I am currently in the process of creating a WordPress plugin that will manually send an email containing WooCommerce Order details to a specified supplier's email address. I am facing a challenge in understanding how to load data when a use ...

javascriptphpjqueryajaxwordpress

What is the best way to define one API route that accommodates two different query combinations?

Is it possible to define 1 API route with 2 different query combination options? We have 2 routes: GET /api/v1/resource?filter=byName&key=restaurant&city=chicago GET /api/v1/resource?filter=byLocation&lat=34&long=78 In soaJS, schema ...

javascriptnode.jssoajs

Providing a public API that exclusively grants access to requests originating from my own website

After hours of scouring Google and SO, I have yet to find someone facing the same challenge I am encountering now. Here's the situation: We have invested a significant amount of money and effort into maintaining a database. The data from this databas ...

javascriptnode.jsrestsecurityreactjs

React causing issues when displaying PNG images on browser

Running into an issue with my React app where I am unable to render a PNG file from the "src" folder. The error message pops up on Google Chrome browser, showcasing the problem: https://i.stack.imgur.com/y8dJf.png Unfortunately, my project doesn't ha ...

javascriptreactjs

Experiencing a bug in the production build of my application involving Webpack, React, postCSS, and potentially other JavaScript code not injecting correctly

I've encountered an issue with my webpack.prod.config when building my assets, which may also be related to the JS Babel configuration. While I can successfully get it to work in the development build by inline CSS, the problem arises when attempting ...

javascriptjqueryreactjswebpackpostcss

Retrieve Nuxt Router from plugin

I have developed a customized Nuxt plugin that includes some useful global functions loaded in the configuration file. However, I am facing a challenge as I try to access the router within one of these functions. Despite my efforts, I keep running into a ...

vue.jsnuxt.jsvue-router

The data from the method in the Vue.js component is not displaying as expected

Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far: HTML <div id="root"> <h1> ...

javascriptvue.jsvuejs2vue-component