Question 296034 in Html Question posted in
Some basic documentation can be found here.

Regex substitution for HTML attributes

I want to replace the content of the ‘src’ attribute with the content of the ‘data-src’ attribute with a regex.

This is the HTML :

<td style="text-align:center;">
<a href="/wiki/Cashier" title="Cashier">
<img alt="Cashier 1x1" src="**content_to_replace**" decoding="async" loading="lazy" width="36" height="52" data-image-name="Cashier 1x1.png" data-image-key="Cashier_1x1.png" data-relevant="0" data-src="**content_i_want**" class="lazyload">
</a>
<br>
</td>

For the moment i have this regex :

/[^-]( src=")[^"]*"|(data-src=")([^"]*")/g

And for the substitution $1$2$3 but the problem is i don’t know how to put the $3 content where i want.

This is my result :

<td style="text-align:center;"><a href="/wiki/Cashier" title="Cashier">
<img alt="Cashier 1x1 src="  decoding="async" loading="lazy" width="36" height="52" data-image-name="Cashier 1x1.png" data-image-key="Cashier_1x1.png" data-relevant="0" data-src="content_i_want" class="lazyload">
</a>
<br>
</td>

I want "content_i_want" after src=" too

thanks

Tags:

2

Answers


  1. 0

    You should not use Regex to parse HTML. Use JavaScript instead:

    document.querySelectorAll(".lazyload").forEach(elImg => {
  elImg.src = elImg.dataset.src;
});
    img { max-height: 10rem; }
    <img
  class="lazyload"
  loading="lazy"
  alt="Some image"
  src="https://placehold.co/100x80?text=Thumb"
  data-src="https://placehold.co/600x400?text=Large"
>
    Login or Signup to reply.
  2. 0

    This copies the data-src value into the src value. If you want to exchange places,
    or delete a att/value at the same time let me know.
    It can all be done with a single ECMAScript regex.

    <img(?=s)(?=(?:[^>"']|"[^"]*"|'[^']*')*?sdata-srcs*=s*(?:(['"])([Ss]*?)1))(?=((?:[^>"']|"[^"]*"|'[^']*')*?ssrcs*=s*)(?:(['"])([Ss]*?)4)(s+(?:"[Ss]*?"|'[Ss]*?'|[^>]*?)+>))s+(?:"[Ss]*?"|'[Ss]*?'|[^>]*?)+>

    Replace <img$3$1$2$1$6

    https://regex101.com/r/xw6CSU/1

    Uses tried true tested regex used to define the w3c standard. This is just a SAX parser.
    All other types for exclusion can be included if necessary.
    This however has leaps and bounds discretion power using regex.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search