titleContent.vue

<template>
  <div>
    <div v-for="element in array" :key="element.title" class="mt-6">
      <template v-if="element.content !== undefined">
        <h3
          v-if="element.title"
          class="text-lg md:text-xl leading-7 font-medium text-gray-800 dark:text-gray-400"
        >
          {{ element.title }}
        </h3>
        <!-- eslint-disable -->
        <template v-if="Array.isArray(element.content)">
          <p
            v-for="content in element.content"
            :key="content"
            class="text-gray-900 dark:text-gray-200 mt-4"
            v-html="convertContent(content)"
          ></p>
        </template>
        <p
          v-else
          class="text-gray-900 dark:text-gray-200 mt-4"
          v-html="convertContent(element.content)"
        ></p>
        <!-- eslint-enable -->
      </template>
      <template v-else>
        <h2
          class="text-xl md:text-2xl leading-7 font-medium text-gray-900 dark:text-gray-300"
        >
          {{ element.title }}
        </h2>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    array: {
      type: Array,
      required: true,
    },
  },
  methods: {
    convertContent(text) {
      const exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
      const text1 = text.replace(
        exp,
        '<a target="_blank" class="underline text-blue-500 break-all" rel="noopener noreferrer" href=\'$1\'>$1</a>'
      )
      const exp2 = /(^|[^/])(www\.[\S]+(\b|$))/gim
      return text1.replace(
        exp2,
        '$1<a target="_blank" class="underline text-blue-500 break-all" rel="noopener noreferrer" href="http://$2">$2</a>'
      )
    },
  },
}
</script>