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
Heres 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>  —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