diff --git a/components.d.ts b/components.d.ts
index 02e79cbb..a32b4ca7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -86,6 +86,7 @@ declare module '@vue/runtime-core' {
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
EnergyComputer: typeof import('./src/tools/energy-computer/energy-computer.vue')['default']
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
+ ExtractTextFromHtml: typeof import('./src/tools/extract-text-from-html/extract-text-from-html.vue')['default']
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
diff --git a/src/tools/extract-text-from-html/extract-text-from-html.e2e.spec.ts b/src/tools/extract-text-from-html/extract-text-from-html.e2e.spec.ts
new file mode 100644
index 00000000..6d79e678
--- /dev/null
+++ b/src/tools/extract-text-from-html/extract-text-from-html.e2e.spec.ts
@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Extract text from html', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/extract-text-from-html');
+ });
+
+ test('Has correct title', async ({ page }) => {
+ await expect(page).toHaveTitle('GoDev.Run - Extract text from HTML');
+ });
+
+ test('Extract text from HTML', async ({ page }) => {
+ await page.getByTestId('input').fill('Paste your HTML in the input form on the left
');
+ const extractedText = await page.getByTestId('area-content').innerText();
+ expect(extractedText.trim()).toEqual('Paste your HTML in the input form on the left'.trim());
+ });
+});
diff --git a/src/tools/extract-text-from-html/extract-text-from-html.service.test.ts b/src/tools/extract-text-from-html/extract-text-from-html.service.test.ts
new file mode 100644
index 00000000..841730be
--- /dev/null
+++ b/src/tools/extract-text-from-html/extract-text-from-html.service.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { getTextFromHtml, validateHtml } from './extract-text-from-html.service';
+
+describe('extract-text-from-html service', () => {
+ describe('validateHtml', () => {
+ it('check if the value is valid html', () => {
+ expect(validateHtml('Paste your HTML in the input form on the left
')).toBeTruthy();
+ expect(validateHtml('Paste your HTML in the input form on the left
')).toBeTruthy();
+ expect(validateHtml('Paste your HTML in the input form on the left
Paste your HTML in the input form on the left
Paste your HTML in the input form on the left
')).toBeTruthy();
+ });
+
+ it('check if the value is an html invlid', () => {
+ expect(validateHtml('Paste your HTML in the input form on the left
')).toBeFalsy();
+ expect(validateHtml('Paste your HTML in the input form on the left
')).toBeFalsy();
+ expect(validateHtml('
Paste your HTML in the input form on the left')).toBeFalsy();
+ expect(validateHtml('
Paste your HTML in the input form on the left<>')).toBeFalsy();
+ expect(validateHtml('<>Paste your HTML in the input form on the left<>')).toBeFalsy();
+ expect(validateHtml('
Paste your HTML in the input form on the left')).toBeFalsy();
+ expect(validateHtml('
Paste your HTML in the input form on the left
')).toBeTruthy();
+ });
+ });
+
+ describe('getTextFromHtml', () => {
+ it('must be return a string', () => {
+ expect(getTextFromHtml('
Paste your HTML in the input form on the left
')).toString();
+ });
+
+ it('must be return text from html', () => {
+ expect(getTextFromHtml('
Paste your HTML in the input form on the left
')).toStrictEqual(
+ 'Paste your HTML in the input form on the left',
+ );
+ });
+ });
+});
diff --git a/src/tools/extract-text-from-html/extract-text-from-html.service.ts b/src/tools/extract-text-from-html/extract-text-from-html.service.ts
new file mode 100644
index 00000000..4061c091
--- /dev/null
+++ b/src/tools/extract-text-from-html/extract-text-from-html.service.ts
@@ -0,0 +1,22 @@
+function validateHtml(value: string) {
+ try {
+ new DOMParser().parseFromString(value, 'text/html');
+ }
+ catch (error) {
+ return false;
+ }
+
+ const regex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>|<([a-z][a-z0-9]*)\b[^\/]*\/>/gi;
+ const matches = value.match(regex);
+
+ return Boolean(matches !== null && matches.length);
+}
+
+function getTextFromHtml(value: string) {
+ const element = document.createElement('div');
+ element.innerHTML = value;
+ const text = element?.innerText || element?.textContent || '';
+ return text.replace(/\s+/g, ' ');
+}
+
+export { validateHtml, getTextFromHtml };
diff --git a/src/tools/extract-text-from-html/extract-text-from-html.vue b/src/tools/extract-text-from-html/extract-text-from-html.vue
new file mode 100644
index 00000000..44a1a222
--- /dev/null
+++ b/src/tools/extract-text-from-html/extract-text-from-html.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/src/tools/extract-text-from-html/index.ts b/src/tools/extract-text-from-html/index.ts
new file mode 100644
index 00000000..b724e809
--- /dev/null
+++ b/src/tools/extract-text-from-html/index.ts
@@ -0,0 +1,13 @@
+import { CursorText } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+ name: 'Extract text from HTML',
+ path: '/extract-text-from-html',
+ description:
+ 'Paste your HTML in the input form on the left and you will get text instantly. Occasionally, you may need to extract plain text from an HTML page where CSS properties (like user-select: none;) prevent text selection. The typical workaround involves using the DevTools (F12) to select "Copy → outer HTML". The proposed tool would simplify this process by extracting the "inner Text" directly from the copied HTML.',
+ keywords: ['extract', 'text', 'from', 'html'],
+ component: () => import('./extract-text-from-html.vue'),
+ icon: CursorText,
+ createdAt: new Date('2024-05-10'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 4fe33c17..5bfdbb2a 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -13,6 +13,7 @@ import { tool as energyComputer } from './energy-computer';
import { tool as peerShare } from './peer-share';
import { tool as macAddressConverter } from './mac-address-converter';
import { tool as jsUnobfuscator } from './js-unobfuscator';
+import { tool as extractTextFromHtml } from './extract-text-from-html';
import { tool as asciiTextDrawer } from './ascii-text-drawer';
import { tool as textToUnicode } from './text-to-unicode';
@@ -213,6 +214,7 @@ export const toolsByCategory: ToolCategory[] = [
emailNormalizer,
regexTester,
regexMemo,
+ extractTextFromHtml,
],
},
{