random-web-tools/src/views/PHPInfo.vue

<template>
  <div v-html="toolResult"></div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      toolResult: "",
    };
  },
  mounted() {
    axios.post(`/api/php/phpinfo.php`, {}).then((response) => {
      const phpinfoHTML = response.data;

      // Create a temporary DOM element
      const tempDiv = document.createElement("div");
      tempDiv.innerHTML = phpinfoHTML;

      // Select all <style> tags
      const styleTags = tempDiv.querySelectorAll("style");

      styleTags.forEach((styleTag) => {
        // Get the CSS content
        let cssContent = styleTag.innerHTML;

        // Prepend "main " to each selector
        cssContent = cssContent.replace(/([^{}]+){/g, "main $1 {");

        // Update the <style> tag's content
        styleTag.innerHTML = cssContent;
      });

      // Make <hr> full width
      tempDiv.innerHTML += `
        <style>
          main hr {
            width: 100% !important;
          }
        </style>
      `;

      // Extract the modified HTML content
      this.toolResult = tempDiv.innerHTML;

      Promise.resolve(response);
    });
  },
};
</script>

<style lang="scss"></style>