JavaScript code: Songlations post formatting

JavaScript – To help me format posts before I start translating, I wrote an HTML document with textbox inputs for various parts of the post (title, title translation, YouTube link, genre, country, lyrics, etc). I made buttons for JavaScript-transformed outputs that I can paste into WordPress. It saves me time so I don’t need to manually format everything. To use, copy the following code to a text editor, save with extension .html, and open in a web browser. Version 2023.12 below:
<!DOCTYPE html UBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- tells IE to use the latest compatibility mode -->
<meta charset="utf-8">
<title>Songlations post formatting with JavaScript</title>
<style>
	.column {
	  float: left;
	  width: 50%;
	}

	/* Clear floats after the columns */
	.row:after {
	  content: "";
	  display: table;
	  clear: both;
	}
	
	.row {
	  display: flex;
	}

	.column {
	  flex: 50%;
	}
</style>
</head>
<body>
<h1>Songlations.com Text Transformation Tools</h1> 
<button type="button" onClick="charCodesButton();">Just Special Characters</button>
<button type="button" onClick="transform1();">Simple Format</button>
<button type="button" onClick="transform2();">Songlations.com Format</button>
<br /><br />
 
<div class="row">
<div class="column">

<b>Top Lines:</b><br />
<textarea rows = "2" cols = "65" id="TitleByArtist">
Title by Artist</textarea><br />

<textarea rows = "2" cols = "65" id="TitleTranslation">
Title Translation</textarea><br />

<textarea rows = "2" cols = "26" id="Album">
Album</textarea>
<textarea rows = "2" cols = "25" id="AlbumTranslation">
AlbumTranslation</textarea>
<textarea rows = "2" cols = "7" id="AlbumYear">
Year</textarea><br />


<textarea rows = "2" cols = "65" id="Style">
Style</textarea><br />

<textarea rows = "2" cols = "65" id="Country">
Country</textarea><br />

<textarea rows = "2" cols = "65" id="url">
YouTube url</textarea><br />

<br />
<b>Input:</b><br />
<textarea rows = "32" cols = "65" id="myInput">

 Enter song lyrics here...

           for example:  
  
  Te esperaré,
Te esperaré en las sombras,
Siempre allí estaré.
</textarea>
</div>

<div class="column">
<b>Output:</b><br />
<textarea rows = "32" cols = "65" id="myOutput">
Formatted song lyrics...
</textarea></div>


</div> <!-- end row-->
   
<!-- code here -->   
    <script>
//Add HTML special character codes only 
function charCodes(){
        // Get the input value and define variables 
        var inputVal = document.getElementById("myInput").value;
		var x = "";
            
        // Edit the input
        x = inputVal.replace(/á/g, '&aacute;');
		x = x.replace(/é/g, '&eacute;');
		x = x.replace(/í/g, '&iacute;');
		x = x.replace(/ó/g, '&oacute;');
		x = x.replace(/ú/g, '&uacute;');
		x = x.replace(/ñ/g, '&ntilde;');
		x = x.replace(/ö/g, '&ouml;');
		x = x.replace(/ü/g, '&uuml;');

		x = x.replace(/Á/g, '&Aacute;');
		x = x.replace(/É/g, '&Eacute;');
		x = x.replace(/Í/g, '&Iacute;');
		x = x.replace(/Ó/g, '&Oacute;');
		x = x.replace(/Ú/g, '&Uacute;');
		x = x.replace(/Ñ/g, '&Ntilde;');
		
		x = x.replace(/¿/g, '&iquest;');
		x = x.replace(/¡/g, '&iexcl;');
		x = x.replace(/[“”]/g, '\"');   // replace curly quotes with non-curly

		// Display the values
		myInput.value = inputVal;
		/* myOutput.value = x;  */
		return x;
}



//=====================================================
//Simple format: replace special characters, add line breaks, and add HTML tags around defined text 
function songTransform(){
    // Define variables 
	var x = "";
    x = charCodes();     // reads from input box
				
	// Clean up input
	x = x.trim();  // remove leading and trailing whitespace from textblock	
	x = x.trim().split(/[\u0020]+/).join(' '); // replace multiple spaces with single spaces
	
	
    // Remove leading whitespace from EACH line of the textbox
	// code adapted from https://stackoverflow.com/questions/49192154/how-to-remove-first-character-in-each-line-of-textarea
    x = x.split('\n')   // split at every newline
			.map(str => // go through your array
				str.match(/^[\u0020]/) ?    // condition checks for leading space
				str.trim() // if true then trim 
				: str      // if false then just return string as is
				)
				.join('\n');
			
			// old attempts -
		    //x = x.replace(/^\s+|\s+$/g, '');  // remove leading and trailing spaces from the text block
		    //x = x.replace(/\n[\s+]/g, '\n');  // 3/12/2022 to trim each line

	// Add line break HTML
	x = x.replace(/[\n\r|\r?\n]+/g, '<br />\n');  // replace line breaks (? means zero or one occurence)
		
	// Edit the input HTML formatting
	x = x.replace('Style:', '<b>Style:</b>');
	x = x.replace('Album:', '<b>Album:</b>');
	x = x.replace('Country:', '<b>Country:</b>');
	x = x.replace('Countries:', '<b>Countries:</b>');
	x = x.replace('Listen:', '<b>Listen:</b>');
		
	x = x.replace('Translation:', '<h2>Translation:</h2>');
	x = x.replace('Translation Notes:', '<h2>Translation Notes:</h2>');
	x = x.replace('About:', '<h2>About:</h2>');

	return x;
}
		
		
//=====================================================	
// Songlations.com post formatting 
function songTransformMore()  {
	// pick up top line variables
	var Title = document.getElementById("TitleByArtist").value;
	
	var TitleTranslation = document.getElementById("TitleTranslation").value.replace(/["]+/g, '');
	
	var Album = document.getElementById("Album").value;
	
	var AlbumTranslation = document.getElementById("AlbumTranslation").value.replace(/["]+/g, '');
	
	var Year = document.getElementById("AlbumYear").value;

	var Style = document.getElementById("Style").value;
	
	var Country = document.getElementById("Country").value;
	
	var YouTubeURL = document.getElementById("url").value;

	// format title ---------------------------------
	var formatTitle = Title + ', English translation of lyrics\n\n'

	// combine top lines ----------------------------
	//var extraForFront = '<b>"" Lyrics</b><br /> \n<b>Album:</b><br /> \n<b>Style:</b><br /> \n<b>Country:</b><br /> \n<b>Listen:</b> YouTube<br />\n \n<h2>Translation:</h2>\n\n';	
	
	
	var extraForFront = '<b>"' + TitleTranslation + '" Lyrics</b><br /> \n<b>Album:</b> <i>' + Album + '</i> (' + AlbumTranslation + '), ' + Year +  
	'<br /> \n<b>Style:</b> ' + Style + '<br /> \n<b>Country:</b> ' + Country + 
	'<br /> \n<b>Listen:</b> <a href="' + YouTubeURL + '" target="_blank">' +
	'YouTube</a><br />\n\n' + YouTubeURL + '\n' +
	'\n<h2>Translation:</h2>\n\n';	
	
	// bottom lines -----------------------------------
	var extraForEnd = '<br />\n \n<h2>Translation Notes:</h2>\n';
		
		
	// output -------------------
	x = songTransform()
	y = formatTitle + extraForFront + '<i>' + x + '</i>' + extraForEnd;
	return y;
}
	
	
	
//=====================================================		
// Define buttons
function charCodesButton() {
	myOutput.value = charCodes()	
}
	
function transform1() {
	myOutput.value = songTransform()	
}
		
function transform2() {
	myOutput.value = songTransformMore()	
}	

//=====================================================

</script>
</body>
</html>
Share this:
