feat(new tool): unicode to java entities

This commit is contained in:
TuanNA1 2024-05-16 14:08:58 +07:00 committed by ng-anhhtuann
parent 2821655554
commit e9a4d06d39
8 changed files with 76 additions and 117 deletions

18
components.d.ts vendored
View file

@ -88,24 +88,16 @@ declare module 'vue' {
IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
IconMdiCamera: typeof import('~icons/mdi/camera')['default']
IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
IconMdiClose: typeof import('~icons/mdi/close')['default']
IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
IconMdiDownload: typeof import('~icons/mdi/download')['default']
IconMdiEye: typeof import('~icons/mdi/eye')['default']
IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
IconMdiHeart: typeof import('~icons/mdi/heart')['default']
IconMdiPause: typeof import('~icons/mdi/pause')['default']
IconMdiPlay: typeof import('~icons/mdi/play')['default']
IconMdiRecord: typeof import('~icons/mdi/record')['default']
IconMdiSearch: typeof import('~icons/mdi/search')['default']
IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
IconMdiVideo: typeof import('~icons/mdi/video')['default']
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@ -132,33 +124,25 @@ declare module 'vue' {
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDivider: typeof import('naive-ui')['NDivider']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NH1: typeof import('naive-ui')['NH1']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLabel: typeof import('naive-ui')['NLabel']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSlider: typeof import('naive-ui')['NSlider']
NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch']
NTable: typeof import('naive-ui')['NTable']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

View file

@ -392,6 +392,6 @@ tools:
title: Text to ASCII binary
description: Convert text to its ASCII binary representation and vice-versa.
unicode-to-java-entites:
unicode-to-java-entities:
title: Unicode Characters to Java Entities Converter
description: Unicode Characters to Java Entities Converter and vice-versa

View file

@ -381,6 +381,6 @@ tools:
title: Chuyển đổi văn bản thành nhị phân ASCII
description: Chuyển đổi văn bản thành biểu diễn nhị phân ASCII của nó và ngược lại.
unicode-to-java-entites:
unicode-to-java-entities:
title: Chuyển đổi ký tự Unicode sang thực thể Java
description: Chuyển đổi ký tự Unicode sang thực thể Java và ngược lại

View file

@ -3,11 +3,11 @@ import { defineTool } from '../tool';
import { translate } from '@/plugins/i18n.plugin';
export const tool = defineTool({
name: translate('tools.unicode-to-java-entites.title'),
path: '/unicode-to-java-entites',
description: translate('tools.unicode-to-java-entites.description'),
keywords: ['text', 'to', 'unicode'],
name: translate('tools.unicode-to-java-entities.title'),
path: '/unicode-to-java-entities',
description: translate('tools.unicode-to-java-entities.description'),
keywords: ['java-entities', 'to', 'unicode', 'text'],
component: () => import('./unicode-characters-to-java-entities.vue'),
icon: TextWrapDisabled,
createdAt: new Date('2024-01-31'),
createdAt: new Date('2024-05-16'),
});

View file

@ -5,59 +5,59 @@ function strlenFix(str: string): string {
return str;
}
function parseUnicodeToJavaEntities(source: string, direction: '0' | '-1'): string {
function parseUnicodeToJavaEntities(source: string): string {
let result = '';
if (direction === '0') {
// UTF-8 to entities
for (let i = 0; i < source.length; i++) {
const charCode = source.charCodeAt(i);
if (charCode <= 127) {
result += source.charAt(i);
}
else {
result += `\\u${strlenFix(charCode.toString(16).toUpperCase())}`;
}
for (let i = 0; i < source.length; i++) {
const charCode = source.charCodeAt(i);
if (charCode <= 127) {
result += source.charAt(i);
}
}
else {
// Entities to UTF-8
let state: 0 | 1 | 2 = 0;
let chars = 0;
let value = '';
for (let i = 0; i < source.length; i++) {
switch (state) {
case 0:
if (source.charAt(i) === '\\') {
state = 1;
}
else {
result += source.charAt(i);
}
break;
case 1:
if (source.charAt(i) === 'u') {
state = 2;
chars = 0;
value = '';
}
else {
result += `\\${source.charAt(i)}`;
state = 0;
}
break;
case 2:
chars++;
value += source.charAt(i);
if (chars >= 4) {
result += String.fromCharCode(Number.parseInt(value, 16));
state = 0;
}
break;
}
else {
result += `\\u${strlenFix(charCode.toString(16).toUpperCase())}`;
}
}
return result;
}
export { parseUnicodeToJavaEntities };
function parseJavaEntitiesToUnicode(source: string): string {
let result = '';
let state: 0 | 1 | 2 = 0;
let chars = 0;
let value = '';
for (let i = 0; i < source.length; i++) {
switch (state) {
case 0:
if (source.charAt(i) === '\\') {
state = 1;
}
else {
result += source.charAt(i);
}
break;
case 1:
if (source.charAt(i) === 'u') {
state = 2;
chars = 0;
value = '';
}
else {
result += `\\${source.charAt(i)}`;
state = 0;
}
break;
case 2:
chars++;
value += source.charAt(i);
if (chars >= 4) {
result += String.fromCharCode(Number.parseInt(value, 16));
state = 0;
}
break;
}
}
return result;
}
export { parseUnicodeToJavaEntities, parseJavaEntitiesToUnicode };

View file

@ -1,25 +0,0 @@
import { expect, test } from '@playwright/test';
test.describe('Tool - Unicode to Java entities', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/unicode-to-java-entites');
});
test('Has correct title', async ({ page }) => {
await expect(page).toHaveTitle('Unicode to Java Entities - IT Tools');
});
test('Unicode to Entities conversion', async ({ page }) => {
await page.getByTestId('unicode-to-entities-input').fill('việt nam');
const unicode = await page.getByTestId('unicode-to-entities-output').inputValue();
expect(unicode).toEqual('vi\u1EC7t nam');
});
test('Entities to Unicode conversion', async ({ page }) => {
await page.getByTestId('entities-to-unicode-input').fill('vi\u1EC7t nam');
const text = await page.getByTestId('entities-to-unicode-output').inputValue();
expect(text).toEqual('việt nam');
});
});

View file

@ -1,20 +1,20 @@
import { describe, expect, it } from 'vitest';
import { parseUnicodeToJavaEntities } from './unicode-characters-to-java-entities.service';
import { parseJavaEntitiesToUnicode, parseUnicodeToJavaEntities } from './unicode-characters-to-java-entities.service';
describe('unicode-to-entities', () => {
describe('convertTextToUnicode', () => {
it('a unicode string is converted to java entities representation', () => {
expect(parseUnicodeToJavaEntities('là', '0')).toBe('l\u00E0');
expect(parseUnicodeToJavaEntities('sơn tùng MTP', '0')).toBe('s\u01A1n t\u00F9ng MTP');
expect(parseUnicodeToJavaEntities('', '0')).toBe('');
expect(parseUnicodeToJavaEntities('là')).toBe('l\\u00E0');
expect(parseUnicodeToJavaEntities('sơn tùng MTP')).toBe('s\\u01A1n t\\u00F9ng MTP');
expect(parseUnicodeToJavaEntities('')).toBe('');
});
});
describe('entities-to-unicode', () => {
it('java entities string is converted to its unicode representation', () => {
expect(parseUnicodeToJavaEntities('l\u00E0', '-1')).toBe('là');
expect(parseUnicodeToJavaEntities('s\u01A1n t\u00F9ng MTP', '-1')).toBe('sơn tùng MTP');
expect(parseUnicodeToJavaEntities('', '-1')).toBe('');
expect(parseJavaEntitiesToUnicode('l\u00E0')).toBe('là');
expect(parseJavaEntitiesToUnicode('s\u01A1n t\u00F9ng MTP')).toBe('sơn tùng MTP');
expect(parseJavaEntitiesToUnicode('')).toBe('');
});
});
});

View file

@ -1,33 +1,33 @@
<script setup lang="ts">
import { parseUnicodeToJavaEntities } from './unicode-characters-to-java-entities.service';
import { parseJavaEntitiesToUnicode, parseUnicodeToJavaEntities } from './unicode-characters-to-java-entities.service';
import { useCopy } from '@/composable/copy';
const inputUnicode = ref('');
const entitiesFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : parseUnicodeToJavaEntities(inputUnicode.value, '0'));
const { copy: copyUnicode } = useCopy({ source: entitiesFromUnicode });
const entitiesFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : parseUnicodeToJavaEntities(inputUnicode.value));
const { copy: copyJavaEntities } = useCopy({ source: entitiesFromUnicode });
const inputJavaEntities = ref('');
const unicodeFromEntities = computed(() => inputJavaEntities.value.trim() === '' ? '' : parseUnicodeToJavaEntities(inputJavaEntities.value, '-1'));
const { copy: copyText } = useCopy({ source: unicodeFromEntities });
const unicodeFromEntities = computed(() => inputJavaEntities.value.trim() === '' ? '' : parseJavaEntitiesToUnicode(inputJavaEntities.value));
const { copy: copyUnicode } = useCopy({ source: unicodeFromEntities });
</script>
<template>
<c-card title="Unicode Characters to Java entities">
<c-input-text v-model:value="inputUnicode" multiline placeholder="e.g. 'Hello Avengers'" label="Enter Unicode Characters to convert to Java entities" autosize autofocus raw-text test-id="unicode-to-entities-input" />
<c-input-text v-model:value="entitiesFromUnicode" label="Java entities from your text" multiline raw-text readonly mt-2 placeholder="The unicode representation of your text will be here" test-id="unicode-to-entities-output" />
<c-input-text v-model:value="inputUnicode" placeholder="e.g. 'Hello Avengers'" label="Enter Unicode Characters to convert to Java entities" autosize raw-text multiline autofocus test-id="unicode-to-entities-input" />
<c-input-text v-model:value="entitiesFromUnicode" label="Java entities from your text" placeholder="The unicode representation of your text will be here" raw-text multiline readonly mt-2 test-id="unicode-to-entities-output" />
<div mt-2 flex justify-center>
<c-button :disabled="!entitiesFromUnicode" @click="copyUnicode()">
Copy unicode to clipboard
<c-button :disabled="!entitiesFromUnicode" @click="copyJavaEntities()">
Copy Java entities to clipboard
</c-button>
</div>
</c-card>
<c-card title="Java entities to Unicode Characters">
<c-input-text v-model:value="inputJavaEntities" multiline placeholder="Input Java entities" label="Enter Java entities to convert to Unicode Characters" autosize raw-text test-id="entities-to-unicode-input" />
<c-input-text v-model:value="unicodeFromEntities" label="Text from your Java entities" multiline raw-text readonly mt-2 placeholder="The text representation of your unicode will be here" test-id="entities-to-unicode-output" />
<c-input-text v-model:value="inputJavaEntities" placeholder="Input Java entities" label="Enter Java entities to convert to Unicode Characters" autosize raw-text multiline test-id="entities-to-unicode-input" />
<c-input-text v-model:value="unicodeFromEntities" label="Text from your Java entities" placeholder="The text representation of your unicode will be here" multiline raw-text readonly mt-2 test-id="entities-to-unicode-output" />
<div mt-2 flex justify-center>
<c-button :disabled="!unicodeFromEntities" @click="copyText()">
Copy text to clipboard
<c-button :disabled="!unicodeFromEntities" @click="copyUnicode()">
Copy Unicode to clipboard
</c-button>
</div>
</c-card>