Issue with textbox script?


Joined
Sep 5, 2022
Messages
1
Reaction score
0
so im trying to create an "AUTO" WYSIWYG real-time documentation generator for VS2019 Intellisense in javascript & jquery. so i got it working, but noticed after I type "Description : " ( a keyword ) into the text box, it converts fine but THEN if i try to delete it, it keeps on adding the <b> </b> tags when i simply want to delete it with backspace. heres the code / video

JavaScript:
<!DOCTYPE html>

<html lang="us">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

<script>

class utilsLib {

// Constructor

constructor ( dictionaryVersion, projectVersion, useDictionaryVersionType, useProjectVersionType, dictionaryVersionType, projectVersionType ) {

this._versionTypes = {
preAlpha : "Pre-Alpha",
alpha    : "Alpha",
beta     : "Beta",
final    : "Final",
                        },

this._useDictionaryVersionType = useDictionaryVersionType;
this._useProjectVersionType = useProjectVersionType;

this._dictionaryVersion = {
version: 1.0,
dictionaryVersionType: this._versionTypes.final,
                        },

this._projectVersion = {
version: 0.1,
projectVersionType: this._versionTypes.preAlpha,
                        }

                    }

set useDictionaryVersionType(useDictionaryVersionType) { this._useDictionaryVersionType = useDictionaryVersionType; }
set useProjectVersionType(useProjectVersionType) { this._useProjectVersionType = useProjectVersionType; }
set dictionaryVersion(dictionaryVersion) { this._dictionaryVersion = dictionaryVersion; }
set projectVersion(projectVersion) { this._projectVersion = projectVersion; }

get useDictionaryVersionType() { return this._useDictionaryVersionType; }
get useProjectVersionType() { return this._useProjectVersionType; }

get dictionaryVersion() {
if (this.GetDictionaryVersionType() === 0) { return this._dictionaryVersion.version.toFixed ( 1 ) + " - " + "{ " + this._dictionaryVersion.dictionaryVersionType + " }"; }
if (this.GetDictionaryVersionType() === 1) { return this._dictionaryVersion.version.toFixed ( 1 ); }
                    }

get projectVersion() {
if (this.GetProjectVersionType()    === 0) { return this._projectVersion.version.toFixed ( 1 ) + " - " + "{ " + this._projectVersion.projectVersionType + " }"; }
if (this.GetProjectVersionType()    === 1) { return this._projectVersion.version.toFixed ( 1 ); }
                    }

SetUseDictionaryVersionType(useDictionaryVersionType) { this.useDictionaryVersionType = useDictionaryVersionType; }
SetUseProjectVersionType(useProjectVersionType) { this.useProjectVersionType = useProjectVersionType; }
SetDictionaryVersionType(dictionaryVersionType) { this.dictionaryVersionType = dictionaryVersionType; }
SetProjectVersionType(projectVersionType) { this.projectVersionType = projectVersionType; }
SetDictionaryVersion(dictionaryVersion) { this.dictionaryVersion = dictionaryVersion.toFixed(1); }
SetProjectVersion(projectVersion) { this.projectVersion = projectVersion.toFixed(1); }

GetUseDictionaryVersionType() { return this.useDictionaryVersionType; }
GetUseProjectVersionType() { return this.useProjectVersionType; }
GetDictionaryVersionType() { return this.dictionaryVersionType; }
GetProjectVersionType() { return this.projectVersionType; }
GetDictionaryVersion() { return this.dictionaryVersion; }
GetProjectVersion() { return this.projectVersion; }

                }

var utils = new utilsLib ( );

utils.SetUseDictionaryVersionType ( true );
utils.SetUseProjectVersionType ( true );
utils.SetDictionaryVersionType ( 0 );
utils.SetProjectVersionType ( 0 );

console.log ( utils );

            </script>

<head>
<title>Documentation Generator -
<script>document.write(utils.GetProjectVersion());</script>
</title>
</head>

<body>

<script>

$ ( document ).ready ( function ( ) {

var utilLib = new utilsLib ( );

var animals, mammals;

var dictionary;

function InitializeDictionary ( ) {

                            animals = {
allAnimals : {
flying : {
sparrow : "sparrow",
dove : "dove",
                                    }
                                }
                            },

                            mammals = {
allMammals : {
swimming : {
whale : "whale",
                                    }
                                }
                            }

                        }

function CreateDictionary ( myDictionaryName = "NEW dictionary name", myDictionaryValue = "TEST!" ) {

                            obj = { };

v = "attr";

var utils = new utilsLib ( );
utils.SetUseDictionaryVersionType ( true );
utils.SetUseProjectVersionType ( true );
utils.SetDictionaryVersionType ( 0 );
utils.SetProjectVersionType ( 0 );

                            obj [ v ] = {
[ "Title" ] : myDictionaryName,
[ "DictionaryVersion" ] : JSON.parse ( JSON.stringify ( utils.GetDictionaryVersion ( ) ) ),
[ "ProjectVersion"    ] : JSON.parse ( JSON.stringify ( utils.GetProjectVersion ( ) ) ),
                            };

return obj [ v ];

                        }

function PopulateDictionary ( dictionary, dictionaryValue ) {

var args = arguments;

for ( var i = 0; i < args.length - 1; i++ ) {

AddToDictionary ( dictionary, JSON.parse ( JSON.stringify (
                                    dictionaryValue
                                ) ) );

                            }

                        }

function AddToDictionary ( dictionary, dictionaryValue ) {

var args = arguments;

for ( var i = 0; i < args.length - 1; i++ ) {
Object.assign ( dictionary, dictionaryValue );
                            }

                        }

function UpdateDictionary ( dictionary, dictionaryValue ) {

try {

// Adds `object{s}` to `main created object`
// PopulateDictionary ( dictionary,
//     { dictionaryValue }
// );

// Adds `object{s}` to `main object`
// PopulateDictionary ( dictionary,
//     dictionaryValue
// );

                                PopulateDictionary ( dictionary,
                                    dictionaryValue
                                );

                            }

catch ( e ) {

console.log ( e );

                            }

                        }

function myFunction ( ) {

// Create array of objects for translation
// definitions

var dictionary = [

                                {
word : "Description : ",
translation : "<b>Description : </b> ",
                                },
                               
                            ];

console.log ( dictionary );

$myInput = $ ( '#myInput' );
$button = $ ( '#translate' );

// Sort dictionary so that longer words are
// checked first in looping later

dictionary.sort ( function ( a, b ) {

return b.word.length - a.word.length;

                            } );

// Replace text while typing ...

$("#myInput").on("input", function () {

var text = $myInput.val();

// Loop through each item in dictionary and replace
// where found (
// prioritizing longer words
// )

$.each(dictionary, function (k, v) {

// Convert keyword to REGEX (
// currently case-insensitive
// )

var regex = new RegExp(v.word, "gim");
var parsed = text.match(new RegExp(v.translation, 'gim'))
try {
                                        tmp = []
while (parsed.length > 0) {
//debugger
tmp.push(text.substring(0, parsed[0].length+text.search(parsed.shift())))
text = text.replace(tmp[tmp.length-1], '')
                                        }
                                        text = text.replace(regex, v.translation)
text = tmp.join('') + text
                                    }
catch{text = text = text.replace(regex, v.translation)}

                                });

var origStr = "<b><b>" + $myInput.val(text).html() + "< /b></b >";
console.log ( "origStr : " + origStr );

                            });

$('#myInput').attr(
'placeholder',
'Type text to Translate... Or hit `Browse`...' + '\r\n\r\n' +
'Example Usage' + ' : ' + '\r\n\r\n' +
'/// <summary>' + '\r\n' +
'/// <b>Description</b> : Adds <b><i>`padding`</i></b> to <b><i>`end`</i></b> of <b><i>`string`</i></b> <b>`OR`</b> <b><i>`float`</i></b>...<br/><br/>' + '\r\n' +
'/// <b>Parameter{s}</b> : ' + '\r\n' +
'/// <parameter><b><i>str, length</i></b></parameter><br/><br/>' + '\r\n' +
'/// <b>Parameter{ 1 } : <i>`val`</i></b> parameter is the <b><i>`string`, `int`</i></b> <b>`OR`</b> <b><i>`float`</i></b> value in which to add <b><i>`padding`</i></b> to the end of...<br/><br/>' + '\r\n' +
'/// <b>Parameter{ 2 } : <i>`length`</i></b> parameter is <b><i>`how much padding`</i></b> you want at the <b><i>`end`</i></b> of the <b><i>`string`</i></b>...<br/><br/>' + '\r\n' +
'/// <b>Note{s}</b> : <b><i>Parameter{ 1 }</i></b> will <b><i>`automatically`</i></b> turn a <b><i>`float`</i></b> or <b><i>`integer`</i></b> into a <b><i>`string`</i></b>...<br/><br/>' + '\r\n' +
'/// </summary>'
                            );

                        }

                        myFunction();

                    });

                </script>

<h1>Welcome to
<script>document.write(document.title);</script>!
</h1>

<div class="ui-widget">
<p><i>&emsp;&emsp;&#8212;This page demonstrates my Auto Documentation Generator!</i></p><br>
<hr>
</div>

<h1>Test <script>document.write(document.title);</script> : </h1><br>

<textarea cols="50" rows="10" type="text" id="myInput" name="myInput" class="chatinput" placeholder="Type text to Translate... Or hit `Browse`..."></textarea><br><br>

<div id="result"></div><br>

</body>

</html>

Heres video

 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top