Add regex test mode

This commit is contained in:
Cohee 2024-01-04 04:34:38 +02:00
parent 8a07edf656
commit 926f94b01d
2 changed files with 47 additions and 1 deletions

View File

@ -1,9 +1,14 @@
<div id="regex_editor_template">
<div class="regex_editor">
<h3><strong data-i18n="Regex Editor">Regex Editor</strong>
<h3 class="flex-container justifyCenter alignItemsBaseline">
<strong data-i18n="Regex Editor">Regex Editor</strong>
<a href="https://regexr.com/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
<div id="regex_test_mode_toggle" class="menu_button menu_button_icon">
<i class="fa-solid fa-bug fa-sm"></i>
<span class="menu_button_text" data-i18n="Test Mode">Test Mode</span>
</div>
</h3>
<small class="flex-container extensions_info">
@ -11,6 +16,22 @@
</small>
<hr />
<div id="regex_test_mode" class="flex1 flex-container displayNone">
<div class="flex1">
<label class="title_restorable" for="regex_test_input">
<small data-i18n="Input">Input</small>
</label>
<textarea id="regex_test_input" class="text_pole textarea_compact" rows="4" placeholder="Type here..."></textarea>
</div>
<div class="flex1">
<label class="title_restorable" for="regex_test_output">
<small data-i18n="Output">Output</small>
</label>
<textarea id="regex_test_output" class="text_pole textarea_compact" rows="4" placeholder="Empty" readonly></textarea>
</div>
<hr>
</div>
<div class="flex-container flexFlowColumn">
<div class="flex1">
<label for="regex_script_name" class="title_restorable">

View File

@ -165,6 +165,31 @@ async function onRegexEditorOpenClick(existingId) {
.prop('checked', true);
}
editorHtml.find('#regex_test_mode_toggle').on('click', function () {
editorHtml.find('#regex_test_mode').toggleClass('displayNone');
updateTestResult();
});
function updateTestResult() {
if (!editorHtml.find('#regex_test_mode').is(':visible')) {
return;
}
const testScript = {
scriptName: editorHtml.find('.regex_script_name').val(),
findRegex: editorHtml.find('.find_regex').val(),
replaceString: editorHtml.find('.regex_replace_string').val(),
trimStrings: String(editorHtml.find('.regex_trim_strings').val()).split('\n').filter((e) => e.length !== 0) || [],
substituteRegex: editorHtml.find('input[name="substitute_regex"]').prop('checked'),
replaceStrategy: Number(editorHtml.find('select[name="replace_strategy_select"]').find(':selected').val()) ?? 0,
};
const rawTestString = String(editorHtml.find('#regex_test_input').val());
const result = runRegexScript(testScript, rawTestString);
editorHtml.find('#regex_test_output').text(result);
}
editorHtml.find('input, textarea, select').on('input', updateTestResult);
const popupResult = await callPopup(editorHtml, 'confirm', undefined, { okButton: 'Save' });
if (popupResult) {
const newRegexScript = {