Category: javascript

What am I trying to do?

• There is an e-commerce site that obfuscates/hides the buyer information (on seller side of the platform) until you click on the switch to toggle a SWITCH-ON state.
• I am simulating a click() on a switch with javascript to display hidden information
• information (I assume) is pulled from a backend server
• I need to store the information after the contents are displayed through the switch-on toggle

What have I done?

• Simulated a click event on the switch with

document.getElementsByClassName("next-switch-children")[0].click();

• Information is displayed as if I were to toggle the switch manually. It’s a success.
• I can see the values, but I face a problem when trying to store it.
• The stored values are hidden values from before the click() event is simulated. (I want to store values that the server gives back after the click event has happened)
• So, when I am expecting to get the value Shamona(example), I am instead getting S*a stored in receiver.

My code:

// I have this click event

    document.getElementsByClassName("next-switch-children")[0].click();

// And I can't figure out how to execute the following block of code 
// after click is simulated and data is pulled from backend.

    const receiverField = document.getElementsByClassName("order-field-shipping-receiver-name")[0];
    const receiverName = receiverField.getElementsByClassName("order-field-value")[0];
    receiver = receiverName.getElementsByClassName("show-text")[0].textContent;
    console.log(receiver)

How it looks:

• The value is hidden like this at SWITCH-OFF
  
• The value is displayed when the switch is toggled to SWITCH-ON
  
• The console.log(receiver) outputs

S*a

• I am getting S*a instead of Shamona(example) because the code below gets executed right after the click() event happens but before the hidden values can be populated with the ones from the server.

How do I remedy this?

• Tried the following:
• Eventlistener to DOMContentLoaded
• callback that fires when the first function is completed to start the second function.
• foo bar method

If I could listen to an attribute change event like div class= next-switch-off turning to next-switch-on , would that work?

What would be the best way to solve this. Open to any suggestions.

Hello stackoverflow community.
Hope you are all fine.

I need your help because i’m keeping gettting “Promise { : “rejected”, : “Annotation APIs not enabled.” }” with https://acrobatservices.adobe.com/view-sdk/viewer.js

My script aimed to retrieve user entered data from fillable PDF file. This is my script.

<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function() {
            let res=null;
            var adobeDCView = new AdobeDC.View({clientId: "d146718832cf4e97afcd8b6e27fb967b", divId: "adobe-dc-view"});
            
            adobeDCView.previewFile(
                {
                    content: {location: {url: "pdf.pdf"}},
                    metaData: {fileName: "Bulletin d'adhésion ",id: "aeef47fe-c473-4a6c-9e78-ec23d7790837"}
                }, 
                {
                    embedMode: "FULL_WINDOW",
                    defaultViewMode: "FIT_PAGE",
                    enableLinearization: true,
                    showDownloadPDF: true,
                    showPrintPDF: true,
                    showLeftHandPanel: false,
                    showAnnotationTools: false,
                    enableFormFilling: true,
                    enableAnnotationAPIs: true,
                    includePDFAnnotations: true,
                    showPageControls: false,
                    showZoomControl: true,
                    showRotateControl: false,
                    disableTextSelection: true,
                    annotationManagerEditMode: "READ",
                    showBookmarks:false,
                    showThumbnails:false,
                    
                }
            ).then((r)=>{
                    r.getAnnotationManager().then(function(a) {
                        console.log(a);
                        
                        a.getFormFields().then(function(f) {
                            console.log('Form Fields:', f);

                            const d = {};
                            f.forEach(r => {d[r.name] = r.value;});
                            console.log(d);
                            
                            
                        });
                    });

            }).catch((e)=>{
                    // Here i got error Promise { <state>: "rejected", <reason>: "Annotation APIs not enabled." }
                    console.log('res',e);
                    
            });
            
            
            document.getElementById('save-button').addEventListener('click', function() {
                    //Here i got adobeDCView.getAnnotationManager() is not a function
                    adobeDCView.getAnnotationManager().then(function(a) {
                        
                        a.getFormFields().then(function(f) {
                            const d = {};
                            f.forEach(r => {d[r.name] = r.value;});
                    }).catch((e)=>{
                    console.log('e',e);
                    
            });

            });
    });
</script>

I am new to html and Flask, any help is much appreciated.

I have a html code where I am displaying two images which get updated regularly. I need to refresh those images every time they are saved/overwritten again. Here is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- include jQuery - better done in the head -->
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack of Images</title>
    <meta http-equiv="refresh" content="2">
</head>

<body>

    <img src="static/X.jpg" alt="Image 1" id = "img1" width="960" height="540">
    <img src="static/X_display.jpg" alt="Image 2" id = "img2" width="960" height="540">


</body>
</html>

I am attempting to write integration tests for an existing application. The component I am testing loads the preference of the user by account and displays them so the user can change them if he desires. It works locally and remotely. But when I run my test code a structure is not created before it is needed and the fact that the code doesn’t seem to “wait” for the structure causes the component to fail to load.

I have a component (lets call it for simplicity, AAA) that as it loads (created()) calls a function fetchAccounts. A async call is made to an API. Then as part of fetchAccounts a call is made another function in AAA fetchPreferences which makes a second async call to an API. That API returns a structure. I have mocked both API calls in my code to return the proper data.

Also in the created() of AAA, a call is made to the function populatePreferences (which takes the data loaded so far and puts it into a structure that the UI then uses to display data on the screen).
So, something like this:

async created() {
   await this.fetchAccounts;
   // some extraneous stuff get some, checking of permissions and the like
   await this.populatePreferences
}.

The problem that I am running into is that the function fetchAccounts calls two APIs (also mocked in my test file), like this:

methods: {
   async fetchAccounts() {
      const accountData = apiCall.getAccounts();
      if error {
         // error handling
      } else {
         // some code to create the accountStruct structure
         const accountStrut = // code that takes the data needed from accountData
         await this.fetchPreferences();
      }
   },
   async fetchPreferences() {
      const preferencesData = apiCall.getPreferences();
      // check for errors and handle them
      // also, code to create the structure preferenceStruct
      this.preferenceStruct = // gets the data from preferencesData and puts it in the structure
   },
   populatePreferences() {
      // loop through accounts
      // for each account get the data from preferencesStruct and place it in a different structure
      this.prefArray.push({
         // structure created here, combining data from both 
         //    this.accountStruct and this.preferenceStruct
      }
   },

My problem is that when the function populatePreferences executes, the structure this.accountStruct has been created but the structure this.preferenceStruct has not. so in the middle of the run of populatePreferences, this.preferenceStruct is undefined. Now this doesn’t break the code, but when this.prefArray is not populated, the component never finishes loading and I can’t test for the things i am looking for (like where there is a control based on the preferences).

So how can I “slow down” the call to populatePreferences is both fetchCustomerAccounts and fetchPreferences are called before populatePreferences starts running? Am I not understanding how things are working? Is something in my test file not configured to allow this to happen?

The component AAA works just fine running locally and on our working remote server. So why does it break in the test run?

Addendum: as I wrote this I thought that maybe changing populatePreferences to async might have an effect. It didn’t.

I’m trying to set up Digest auth to automate testing through Cypress. There are no built-in tools for this, so I have to resort to pure JS.
So far I have only managed to authorize using Postman, all other options didn’t work for me. The same Bruno with Digest Auth gives a 401 status.
I’ve selected the minimum settings with which authorization works for me (status 200), I’ll attach the list by curl-request. The rest of the headers, I think, are substituted automatically and are not displayed in the postman interface.
I would also like to point out that cookies are added after authorization is done. I should extract them from the response request in order to save the session, but that’s the next step, for now I can’t solve the authorization problem.

curl:

curl --location --request POST 'http://exmpl.smth.com/srv/abcbcb/scenario' 
--header 'Host: exmpl' 
--header 'Cookie: PHPSESSID=qarntgdqk2t6brje3414l4f4t0'

And automatically it also substitutes I think the “Authorization” header. (https://github.com/postmanlabs/postman-runtime/blob/develop/lib/authorizer/digest.js#L447)

 headerParams = [USERNAME_EQUALS_QUOTE + username + QUOTE,
            REALM_EQUALS_QUOTE + realm + QUOTE,
            NONCE_EQUALS_QUOTE + nonce + QUOTE,
            URI_EQUALS_QUOTE + uri + QUOTE];

        algorithm && headerParams.push(ALGORITHM_EQUALS_QUOTE + algorithm + QUOTE);
        headerParams.push(QOP_EQUALS + qop);
        nonceCount && headerParams.push(NC_EQUALS + nonceCount);
        headerParams.push(CNONCE_EQUALS_QUOTE + clientNonce + QUOTE);
        headerParams.push(RESPONSE_EQUALS_QUOTE + reqDigest + QUOTE);
        opaque && headerParams.push(OPAQUE_EQUALS_QUOTE + opaque + QUOTE);
        return DIGEST_PREFIX + headerParams.join(', ');

I’ve tried writing the code myself, but I inevitably get a 401 status and can’t successfully authorize. Please point out my errors in the code.
Code example:

const CryptoJS = require('crypto-js');

const url = 'http://exmpl.smth.com/srv/abcbcb/scenario';
const username = 'name';
const password = 'pass';

const qop = 'auth'
const nc = '00000002'

async function digestFetch(url, username, password) {
    const initialResponse = await fetch(url, {
        method: 'POST',
        headers: {
            'Authorization': 'Digest realm="example", qop="auth", nonce="some_nonce", uri="/path", response="some_response"'
        }
    });

    if (initialResponse.status === 401) {
        const authHeader = initialResponse.headers.get('WWW-Authenticate');
        const nonce = extractNonce(authHeader);
        const opaque = extractOpaque(authHeader);
        const realm = extractRealm(authHeader);
        console.log(nonce)
        console.log(opaque)
        console.log(realm)
        const A1 = `${username}:${realm}:${password}`;
        const A2 = `POST:${url}`;
        const HA1 = CryptoJS.MD5(A1).toString();
        const HA2 = CryptoJS.MD5(A2).toString();
        console.log(`1) HA1: ${HA1}n2) HA2: ${HA2}`)

        const responseHash = CryptoJS.MD5(`${HA1}:${nonce}:${nc}:0a4f113b:${qop}:${HA2}`).toString();
        
        const response = `Digest username="${username}", realm="${realm}", nonce="${nonce}", uri="${url}", algorithm="MD5", qop=${qop}, nc=${nc}, cnonce="0a4f113b", response="${responseHash}", opaque="${opaque}"`;
        console.log(`Response: ${response}`)
        const finalResponse = await fetch(url, {
            method: 'POST',
            headers: {
                'Authorization': response,
                'Host': 'exmpl'
            }
        });

        return finalResponse;
    }

    return initialResponse;
}

function extractNonce(authHeader) {
    const match = authHeader.match(/nonce="([^"]+)"/);
    return match ? match[1] : null;
}

function extractOpaque(authHeader) {
    const matches = authHeader.match(/opaque="([^"]+)"/);
    return matches ? matches[1] : null;
}

function extractRealm(authHeader) {
    const matches = authHeader.match(/realm="([^"]+)"/);
    return matches ? matches[1] : null;
}

digestFetch(url, username, password)
    .then(response => {
        if (response.ok) {
            return response.text();
        } else {
            throw new Error('Authentication failed. Status code: ' + response.status);
        }
    })
    .then(data => console.log(data))
    .catch(error => console.error(error));

I want the chart tooltip to display the application, vulnerabilities, and duration. However, for the application name in the tooltip, I would like it to have a background color.

 this.options.plugins = {
      tooltip: {
        callbacks: {
          // Suppress the default title (duration) rendering
          title: () => {
            return "";
          },
          // Suppress individual label rendering
          label: () => {
            return "";
          },
          // Combine everything in the afterBody
          afterBody: (context: any) => {
            console.log("context", context);
            const apps = context
              .map((item) => item.dataset.label)
              .join(", ");
            const duration = context[0].label;
            const vulns = context[0].raw;
            return [
              `application: ${apps}`,
              `vulnerabilities: ${vulns}`,
              `Duration: ${duration}`,
            ];
          },
        },
      },
    };`

current behaviour for only applications:

Expected behaviour for only applications i want like below colors for:

We have a requirement where we need an external partner’s users to be able to access our web application.

External Partner set up : Web app with Cognito User pool on their own AWS account

Our set up : React App with Cognito user pool (username/password authentication) on our AWS account.

The requirement is : Our partner’s users will login into the partner’s website. Once authenticated, they will land on the home page and see a link to our website.
Upon clicking the link, our webapp must be launched in a new tab, users must be verified(probably provisioned in our Cognito prior to that) and allowed access to our applications home page without the need to sign in again.

Our app is a React SPA hosted using S3/Cloudfront. We have a app client for the UI set up in Cognito. When a user attempts to access the app, they are presented with a custom login screen. Once credentials are verified(done using Amplify Auth in the React App) tokens are created in local storage and used thereon to invoke REST APIs etc.

Therefore we need to replicate similar behavior for users accessing our site from the partners website.

Have been reading articles related to SSO / OAuth 2.0 / OIDC looking for information on:

• Does the partner need to make any config changes to their user pool
  to achieve this ?

• What changes do we need to make to our user pool ?

• How should our webapp be accessed from the Partners website(GET on
  our homepage or POST some info like a token etc..) ?

• What changes do we need to make in our UI App code to accommodate
  this ?

Found a article that talks about federating 2 Cognito’s :

https://community.aws/content/2bUvwgyFoeJdjGYgpnRkejYAgYC/how-to-add-cognito-as-oidc-identity-provider-in-cognito?lang=en

But this set up means our partners users will have to sign in(using iDP federation) to access our app which is not the intended behavior(using SSO to be able to access both sites seamlessly).

If anyone has any solutions / pointers, kindly share, it will be much appreciated.

I’m curious about how SeatGeek implements their interactive seating charts for events. The feature allows users to see available, sold, and premium seats, zoom in and out, and select seats dynamically. Does anyone know what technologies or methods they use to make this work so smoothly? Any insights into how they handle data, rendering, or responsiveness would be appreciated!

I haven’t tried implementing anything yet. I’m still in the research phase and looking for guidance on the best approach to take for creating an interactive seating chart similar to SeatGeek.

in the Webflow site doing very standard implementation of YouTube video popup:

        const player = new YT.Player(playerSpot, {
          width: '640',
          videoId: popover.dataset.ytId,
          playerVars: {
            autoplay: false,
            playsinline: 1,
            color: 'white',
            rel: 0,
          },
          events: {
           onReady: function(ev) {
            ev.target.playVideo()
           }
         }
        });

for an unclear reason in 50% of cases the video does not start playing automatically and requires another click.
The playerSpot is an element with popover attribute.
The issue only occurs on iOs=^17, not on android or even iphone xcode simulator.
any idea can help.

the example page is here

html:

<div class="item-list" id="list">
  <div class="draggable" data-index="0" draggable="true">Draggable1</div>
  <div class="draggable" data-index="1" draggable="true">Draggable2</div>
  <div class="draggable" data-index="2" draggable="true">Draggable3</div>
  <div class="draggable" data-index="3" draggable="true">Draggable4</div>
  <div class="draggable" data-index="4" draggable="true">Draggable5</div>
</div>
<div class="drawing-board dropzone" id="dropzone">

js:

$("#list").sortable().disableSelection(); 
$('.draggable').draggable({connectToSortable: "#list"});

Demo

Gif Video

Drag the items in the sorting table to the outside and allow them to move freely, and then drag them back to the sorting table to repeat the previous function

I want that when I start my system and the Watson chatbot opens, my user_name variable already has the name of the user who has logged in.

onLoad: async (instance) => {
 
       /*Here I get the user name from HTML*/
        let userName = document.getElementById("user_name").value || '';
        instance.restartConversation();
        instance.updateHomeScreenConfig({
            is_on: true,
            greeting: `Hola ${userName}! Soy tu asistente virtual, dime algo y te ayudo!`
        });
        instance.send({
            input: {
                text: ""
            },
            context: {
                global: {
                    system: {
                        /*Here is my problem*/
                        user_name: userName
                    }
                }
            }
        }).then((eve) => {
            console.log("Nombre del usuario enviado al contexto:", userName);
        }).catch(err => {
            console.error("Error al enviar el nombre al contexto:", err);
        });
 

        await instance.render();
    }

enter image description here

If it shows me the greeting correctly, but I want my variable to update its value, I already created the variable in Watson, and I also have an intention that tells me what my name is.

That my variable is initialized correctly

I am using Jest with React to write unit test cases for my project with the following specs. When I run yarn test (Jest –coverage). It gives me below error.

Error: Test suite failed to run

    Jest encountered an unexpected token.....

    Details:

    <root dir>/node_modules/cheerio/dist/browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { contains, merge } from './static.js';
                                                                                      ^^^^^^
    SyntaxError: Unexpected token 'export'

      3 | import { configure } from 'enzyme';
      4 |
    > 5 | global.ResizeObserver = jest.fn().mockImplementation(() => ({
        |                                                  ^
      6 |     observe: jest.fn(),
      7 |     unobserve: jest.fn(),
      8 |     disconnect: jest.fn(),

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/enzyme/build/Utils.js:93:16)
      at Object.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:33:14)
      at Object.<anonymous> (node_modules/enzyme/build/index.js:3:21)
      at Object.<anonymous> (node_modules/@wojtekmaj/enzyme-adapter-react-17/build/ReactSeventeenAdapter.js:11:15)
      at Object.<anonymous> (node_modules/@wojtekmaj/enzyme-adapter-react-17/build/index.js:3:18)
      at Object.<anonymous> (test/setup.js:5:50)

My Jest and Babel versions respectively are 29.7.0 and 7.24.0.

Here is my Jest.config.js file.

module.exports = {
  testEnvironment: 'jsdom',
  setupFiles: ["./test/setup.js"],
  testURL: "http://localhost/",
  moduleNameMapper: {
    "^.+\.(less|css)$": "babel-jest",
  },
  transformIgnorePatterns: [
    "/node_modules/?!(cheerio|jest-runtime|enzyme|@wojtekmaj)"
  ],
  testTimeout: 30000,
};

Here is my setup.js file:

import 'raf/polyfill';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { configure } from 'enzyme';

global.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}))

global.CSS = {
    escape: (str) => str,
};

configure({
    adapter: new Adapter(),
});

I tried multiple online solutions tweaking the regexp for transformIgnorePattern field but no luck. Please suggest on the right regexp to use here to get rid of this error or anything else that would be needed.

What am I trying to do?

• There is an e-commerce site that obfuscates/hides the buyer information (on seller side of the platform) until you click on the switch to toggle a SWITCH-ON state.
• I am trying to create a chrome extension that automatically SWITCH-ON the switch and displays user information on page load (among other things)

What have I found?

• The switch is not a normal switch, but a bootstrap version made with Next.js
• I copied the HTML element during the SWITCH-OFF state as well as the SWITCH-ON state, and noticed a few attributes changing.

What did I assume?

• Changing attribute from the SWITCH-OFF state to the SWITCH-ON state would display hidden information.
• HINT: It did not. There is an in-built js file containing a function that does this. I found this while debugging with a breakpoint.

What have I done so far?

• I made a snippet to target the button and change it’s state
• It does change and displays a changed state, but the information is still hidden. When I manually toggle the SWITCH-ON(looking) button, it does not change state, and then actually works to display information. Thereby, working as intended.

This is what it looks like:

• There is a DIV role=”switch” based switch toggle like the following in the code
  
• When manually toggled, the details are revealed (I want this part to happen automatically on page load)
  
• Attributes were modified to be made identical to the SWITCH-ON state, but the details were not revealed.
  

Show me the code?

• HTML for the SWITCH-OFF state

<!-- OFF SWITCH LOOKS LIKE THIS -->
<div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_true"
        class="next-switch next-switch-off next-switch-small aplus-auto-exp" aria-checked="false"
        data-aplus-ae="x38_42bab7ea"
        data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"
        data-aplus-clk="x38_47ece9ab">
        <div class="next-switch-btn"></div>
        <div class="next-switch-children"
            data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfouBzrd"></div>
    </div>
</div>

• HTML for the SWITCH-ON state

<!-- ON SWITCH LOOKS LIKE THIS -->
<div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_false"
        class="next-switch next-switch-on next-switch-small aplus-auto-exp" aria-checked="true"
        data-aplus-ae="x38_42bab7ea"
        data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"
        data-aplus-clk="x38_47ece9ab">
        <div class="next-switch-btn" data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i1.4a904edfouBzrd">
        </div>
        <div class="next-switch-children"
            data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfouBzrd"></div>
    </div>
</div>

• When I add an attribute-change breakpoint in Inspect Element, it breaks at this function

var n = function(t, e, n) {
if (t && t.setAttribute)
try {
t.setAttribute(e, n)
} catch (t) {}
};

• Chrome shows the following context for the variables t, e, n
  t = div.next-switch.next-switch-on.next-switch-small.aplus-auto-exp {__reactInternalInstance$h4n036gxgak: bi, __reactEventHandlers$h4n036gxgak: {…}, checked: true, align: '', title: '', …}, e = "data-spm-anchor-id", n = "Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"

• The whole js file for the above part of code is given as a fiddle here

FINALLY, here is a fiddle you can try.

• I could not make the switch work at all

const orderno = 209386708264213;
const custSwitchselector = document.getElementsByClassName("next-box custom-switch-selector")[0];
const custSwitch = custSwitchselector.getElementsByClassName("next-switch")[0];

// Modify Attributes of Div from OFF to ON state
custSwitch.setAttribute("aria-checked", true);
custSwitch.setAttribute("data-more", orderno + '_false');
custSwitch.setAttribute("class", 'next-switch next-switch-on next-switch-small aplus-auto-exp');

//Store Anchor value
const anchor = custSwitch.getAttribute("data-spm-anchor-id");
const frontanchor = 'Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.'
var endanchor = anchor.replace(frontanchor, "").trim();

//Create Anchors for Button and Child
nextSwitchbutton = custSwitch.getElementsByClassName("next-switch-btn")[0];
nextSwitchchild = custSwitch.getElementsByClassName("next-switch-children")[0];
switchbuttonAnchor = frontanchor
switchbuttonAnchor += "i1."
switchbuttonAnchor += endanchor
switchchildAnchor = frontanchor
switchchildAnchor += "i0."
switchchildAnchor += endanchor

// Modify Attributes of Button and Children
nextSwitchbutton.setAttribute("data-spm-anchor-id", switchbuttonAnchor)
nextSwitchchild.setAttribute("data-spm-anchor-id", switchchildAnchor)

//At this point SWITCHED-OFF switch is IDENTICAL to SWITCHED-ON switch
// But the Details are not revealed
//
// Is there a way to simulate the toggle of the switch on page open?

<!DOCTYPE html>
<html>

<head>
  <!-- The Bootstrap used for the styling is Next js and Next css based -->
  <link rel="stylesheet" href="https://g.alicdn.com/code/npm/@alife/aidc-fusion-theme/3.26.11/DARAZ/next.min.css" />
  <script src="https://g.alicdn.com/code/npm/@alife/aidc-fusion-theme/3.26.11/DARAZ/next.min.js"></script>

</head>

<body>

  <!-- Example of Switched OFF Switch -->
  <div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_true" class="next-switch next-switch-off next-switch-small aplus-auto-exp" aria-checked="false" data-aplus-ae="x38_42bab7ea" data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfh1RhSk"
      data-aplus-clk="x38_47ece9ab">
      <div class="next-switch-btn" data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfh1RhSk">
      </div>
      <div class="next-switch-children"></div>
    </div>
  </div>

</body>

</html>

Rectly I started work with blogger API v3 and I am unable to fetch data response of code in attached image and code :

// This is my js code 

async function fetchposts(){

let data = await fetch(`https://www.googleapis.com/blogger/v3/blogs/${blogId}/pages?key=${api}`);

let posts= await data.json();

console.log(posts);



}



fetchposts();

I get this response

I try to fetch blogger post but unable to fetch

This regular expression: /b(?:A|AO|À|E|O)b/gu is failing to catch the “À” word in this string: ENVIO AO AUTOR E À RÉ and I don’t understand the reason.

Could someone clarify it and/or help me to fix it so that word is captured?

Please see test at Regex101