We Keep Coding

How to use regex or any other means to take a svg file, and extract its attributes and child element separately? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 days ago.
Improve this question
Currently, I have this:
const regex = /<svg.*?width="(.*?)".*?height="(.*?)".*?>(.*)<\/svg>/m;
const fileContent = await fs.readFile(svgFile, 'utf8');
const m = regex.exec(fileContent);
m gives me this:
[
'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="currentColor" d="M1.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM6 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>',
'12',
'12',
'<path fill="currentColor" d="M1.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM6 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>',
index: 0,
input: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="currentColor" d="M1.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM6
7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>',
groups: undefined
]
What I want to get instead is this:
m[0] = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"></svg>' (only the svg without the child-elements, or only the svg attributes, all of them, which could vary depending on the svg icon. Some may have fill attribute, some not.)
m[1] = the path element like in m[3].
How do I do that?

Component not working after come back from any page Reactjs

I am i working on Reactjs/nextjs and right no in my page there is video with audio "start/pause button",Component is working fine if i am coming first time in site/page, but whenever i click on another menu/page and then come back to "home page" then its not working, Where i am wrong ?
Here is my code in index.js file
export default function Home() {
const screenWidth = useWindowSize();
const scrollHeight = useScrollHeight();
const CustomAudioPlayer = dynamic(
() => import("../components/CustomAudioPlayer"),
{ ssr: false }
);
}
And here is my code inside "components/index.js"
function handleAudio() {
if (ref.current.paused) {
setMuted(false);
ref.current.play();
} else {
setMuted(true);
ref.current.pause();
}
}
<buton onClick={handleAudio} className="customAudioPlayerButton">
{!muted ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-down"
viewBox="0 0 16 16"
>
<path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-mute"
viewBox="0 0 16 16"
>
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
</svg>
)}
</buton>

How to detect when user first starts typing text into password field, without being triggered by browser autofills/autocompletes

I've looked through similar questions on stack, but have not found the answer I am looking for.
I have a password field with a button that toggles visibility of the password, so the user can ensure no typoes if desired. However, I do not want this button to be used to view people's saved passwords by other people who may have access to the same computer.
So my solution was, to not enable this visibility toggle button until the user has typed something into the password field. I cannot figure out how to do this however, since any event I use to figure out when the user starts typing, is also being used by the browser when it autofills/autocompletes. I've tried the change, input, and keyup events, and each of them seems to be fired by the browser automatically as soon as the field becomes visible and it autofills a saved password. Using Chrome for testing at the moment.
html:
<div class="input-group">
<input type="password" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<button type="button" class="btn btn-secondary password-visibility-toggle" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</button>
</div>
javascript
// password visibility toggles
document.querySelectorAll( '.password-visibility-toggle' ).forEach( ( passwordVisibilityButton ) => {
const inputGroup = passwordVisibilityButton.closest( '.input-group' );
const passwordInput = inputGroup.querySelector( 'input' );
passwordInput.addEventListener( 'change', ( event ) => {
console.log( 'test' );
if ( passwordVisibilityButton.disabled ) {
passwordVisibilityButton.disabled = false;
passwordVisibilityButton.addEventListener( 'click', ( event ) => {
if ( passwordInput.getAttribute( 'type' ) == 'password' ) {
passwordInput.type = 'text';
inputGroup.querySelector( '.bi-eye' ).classList.add( 'd-none' );
inputGroup.querySelector( '.bi-eye-slash' ).classList.remove( 'd-none' );
} else {
passwordInput.type = 'password';
inputGroup.querySelector( '.bi-eye' ).classList.remove( 'd-none' );
inputGroup.querySelector( '.bi-eye-slash' ).classList.add( 'd-none' );
}
} );
}
} );
} );
This code just triggers before the user inputs anything and enables the toggle button. Any ideas or advice to fix appreciated. Also using bootstrap 5.2 if that matters.

It seems that behavior of input type="password" is totally under the browser control nowadays. Thankfully, the input type="text" is still libre and we can use it as we please. Thus, instead of fighting with that, we can create our own password field, albeit without password manager feature which anyway is not what we actually want on a communal computer. So, here it is:
const toggleMap = {show: 'hide', hide: 'show'};
const group = document.querySelector( '.input-group' );
const password = group.querySelector( '#sign-up-password' );
const passmask = group.querySelector( '#sign-up-passmask' );
const toggle = group.querySelector( '.password-visibility-toggle' );
toggle.addEventListener( 'click', () => {
group.dataset.toggle = toggleMap[group.dataset.toggle];
});
password.addEventListener( 'input', event => {
const value = event.target.value;
passmask.value = value.replace(/./g, '*');
if (toggle.disabled = !value.length)
group.dataset.toggle = 'hide';
});
.input {
position: relative;
}
.input > input {
font-family: monospace;
}
#sign-up-password,
#sign-up-password::selection {
background: transparent;
caret-color: black;
}
#sign-up-password::selection {
background: #F236;
}
#sign-up-passmask {
position: absolute;
display: flex;
z-index: -1;
top: 0;
border-color: transparent;
}
.input-group[data-toggle='hide'] > .password-visibility-toggle > .bi-eye,
.input-group[data-toggle='show'] > .password-visibility-toggle > .bi-eye-slash {
display: none;
}
.input-group[data-toggle='hide'] #sign-up-password,
.input-group[data-toggle='show'] #sign-up-passmask {
color: transparent;
}
<div class="input-group" data-toggle="hide">
<span class="input">
<input type="text" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<input type="text" id="sign-up-passmask">
</span>
<button type="button" class="btn btn-secondary password-visibility-toggle" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</button>
</div>

How to copy/paste in HTML?

I have a site with Drupal 8 and I want to do a "copy" text with a button in TWIG.
How can I do this ?
I need to make a copy to two different place on the same page :
<div>
<small id="copy-to-clipboard-text-share">{{ url('<current>') }}</small>
<button id="copy-to-clipboard-btn-share" class="btn btn-default btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16"><path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/></svg>
</button>
</div>
<div>
<small id="copy-to-clipboard-text-btc">{{ group.field_groupe_donation.value }}</small>
<button id="copy-to-clipboard-btn-btc" class="btn btn-default btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16"><path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/></svg>
</button>
</div>

Button icons are making button names undefined

When I put an icon inside a button, the name and the value property of the button becomes undefined.
listSpendings() {
var mapped = this.props.money.transes.slice(0).reverse().map(trans => {
return (
<div key={trans._id} className="smoothbackground z-depth-3">
<li key={trans._id} className="collection-item" style={{
textDecoration: trans.crossedOut ? "line-through" : "none"
}}> {trans.who} spent ${trans.amount} on {trans.info}
<button onClick={this.handleClickChange} type="submit" className="btn-floating btn-small waves-effect waves-light align-right-button" name="CrossOut" value={trans._id}>
X
</button>
</li>
</div>
)
})
return mapped;
}
This function works without any issues. This is the handleClickChange,
handleClickChange = event => {this.setState({ name: event.target.name, transId: event.target.value}); console.log(event.target.name);}
console.log(event.target.name); logs CrossOut like it should. Because that's the button's name.
However, when I put <i class="material-icons">delete</i> instead of the X you see in the code, console.log(event.target.name); logs undefined.
<i class="material-icons">delete</i> is a delete icon and it properly gets displayed on the screen, inside the button. In any case, I've also tried another icon. This is the trash icon from bootstrap.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
This one also gets displayed but the console.log(event.target.name); also logs undefined.
Any ideas?

svg element does not have name attribute.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
If you use console.log(event.target.fill), you will get currentColor. Because, svg element contains fill attribute. In case of console.log(event.target.hello), you will get undefined. That's because, there is no hello attribute in this HTML element currently.
Edit
Please, check if there is any defined eventlistener for svg elements.