Swagger UI: convert URLs in response to hyperlinks

Viewed 25

Let's say that I make a GET request in the deployed Swagger Docs. The response contains URLs (for example, the URLs of certain images). I want to make those URLs clickable in the Swagger API. How can you do that?


I have tried to edit the DOM in the response interceptor:

requestInterceptor: (response) => {
  setTimeout( /* function that converts URLs to <a> tags */, 50);
  return response;
}

But, oddly enough, it only works for the first time I send the GET request. I cannot believe that this is so complicated or that I am the first one who wants this feature. How are you guys doing it? Thanks!


EDIT: For the sake of completeness, here is how I am manipulating the DOM in the setTimeout callback:

const urlRegex = /* regex matching specific URLs from my domain */
const removeQuotes = (str: string) => str.replaceAll('"', "");

const urls = Array.from(document.querySelectorAll("span"))
    .filter((span) => span.innerText.match(urlRegex))
    .forEach((span) => {
       const innerTextWithoutQuotes = removeQuotes(span.innerText);
       span.innerHTML = `"<a style="color: rgb(162,252,162)"
                            target="_blank"
                            href="${innerTextWithoutQuotes}"
                        >${innerTextWithoutQuotes}</a>"`;
   });

0 Answers
Related