Intro
With the head of the document done all that is left is focusing on the body of the document. This is going to have a few challenges with it. Mostly with how I’m going to be separating all of the different elements within the body. I have 4 elements that I will have to think about the section header, blog paragraph, code box, and finally any links.
Coding the body
First, let's look and remember where we are from yesterday and the new parts of the main function.
Main Function
$('#change-button').click(function(){
let text = $('#text-box').val()
let arr = []
headBodySplit = text.split('</head>');
headArr = headBodySplit[0].split('<')
arr.push(metaSplit(headArr[9]).trim());
arr.push(metaSplit(headArr[10]).trim());
arr.push(titleSplit(headArr[11]).trim());
let mainStr = createHead(arr);
bodyArr = headBodySplit[1].split('<article');
titleArr = bodyArr[0];
mainStr += findTitle(titleArr);
bodyArr = bodyArr[1].split('</article');
let info = defineBlog(bodyArr[0])
let linkArr = findLinkObj(bodyArr[0])
let articleInfo = bodyParse(info,bodyArr[0]);
})
Looking at this we have added the header to the main string variable and have introduced three new functions defineBlog, findLink, and bodyParse. Each of these functions creates the strings that will be the rest of the document.
DefineBody Function
function defineBlog(str){
let arr = [];
let count = 0;
let lengthOfStr = str.length;
while (count < lengthOfStr) {
let sectionHeader =str.indexOf('class='section-header'',count);
let blogPost = str.indexOf('class='blog-text'',count);
let codePost = str.indexOf('class='code-tag',count);
if (sectionHeader === -1 && blogPost === -1 && codePost === -1) {
count = lengthOfStr+1
}else{
let info = blogObjectReturn(sectionHeader,blogPost,codePost).split(',')
arr.push(info[0])
count = parseInt(info[1])+1
}
}
return arr;
}
Define blog is a function that will look through the body string and find when each element of the main blog occurrences. It uses an index to find out when the first time one of the classes of the elements occurrences is. Then will store the order of the elements in an array.
FindLinkObj Function
function findLinkObj(str){
let obj = {}
let endIndex = str.length
let linkIndex = str.indexOf(''link-title'>')
let newStr = str.substring(linkIndex+12,endIndex);
let newArr = newStr.split('helpful-link')
for (var i = 0; i < newArr.length; i++) {
if (i===0) {
}else{
let herfIndex = newArr[i].indexOf('href='');
let taragetIndex = newArr[i].indexOf('target')
let endIndex = newArr[i].indexOf('</a>')
let linkString = newArr[i].substring(herfIndex+6,taragetIndex-2);
let msgString = newArr[i].substring(taragetIndex+16,endIndex);
obj[i-1] = [linkString,msgString];
}
}
return obj;
}
Find link will go through the link string and find all the spots that have a link and save the herf and the link description and save them within an object to use for later.
BodyParse Function
function bodyParse(arr,str){
let obj = {};
let updatedStr = str;
let indexStr = 0;
let startIndex = 0;
let lengthOfStr = 0;
let partOfString = ''
for (var i = 0; i < arr.length; i++) {
lengthOfStr = updatedStr.length;
if (arr[i] === 'section') {
indexStr = updatedStr.indexOf(''section-header'>')
partOfString = updatedStr.substring(indexStr+17,lengthOfStr)
indexStr = partOfString.indexOf('</')
tempStr = partOfString.substring(0,indexStr);
updatedStr = updatedStr.substring(indexStr,lengthOfStr);
obj[i] = ['section',tempStr.trim()]
}else if (arr[i] === 'blog') {
indexStr = updatedStr.indexOf(''blog-text'>')
partOfString = updatedStr.substring(indexStr+12,lengthOfStr)
indexStr = partOfString.indexOf('</')
tempStr = partOfString.substring(0,indexStr);
updatedStr = updatedStr.substring(indexStr,lengthOfStr);
obj[i] = ['blog',tempStr.trim()]
}else if (arr[i] === 'code'){
indexStr = updatedStr.indexOf('tag'>')
partOfString = updatedStr.substring(indexStr+5,lengthOfStr)
indexStr = partOfString.indexOf('</')
let lan = partOfString.substring(0,indexStr);
indexStr = partOfString.indexOf(''code-title'>')
partLength = partOfString.length;
partOfString = partOfString.substring(indexStr+13,partLength)
indexStr = partOfString.indexOf('</')
let title = partOfString.substring(0,indexStr);
indexStr = partOfString.indexOf('code>')
partLength = partOfString.length;
partOfString = partOfString.substring(indexStr+5,partLength)
indexStr = partOfString.indexOf('</code>')
let codeMsg = partOfString.substring(0,indexStr).replaceAll(`'`,`'`);
obj[i] = ['code',lan,title,codeMsg];
}else{
console.log('far Error')
}
}
return obj
}
The final function is body parse. This will do the same thing as the find link function. First, the function looks through the array that was created in define blog. Then it will pull out the parts that I need out of each element and save those elements to an object. It will finally return that function. There is one last function that is used within this program and that is to create the body.
CreateBody Function
function createBody(bodyObj,linkObj){
let str = `
<article class='blog-post'>
`
let lengthOfBody = Object.keys(bodyObj).length;
let lengthOfLinks = Object.keys(linkObj).length;
for (var i = 0; i < lengthOfBody; i++) {
if (bodyObj[i][0] == 'blog' ) {
let newStr = `<x-blogparagraph msg='`+ bodyObj[i][1] +`'> @endComponentClass
`;
str += newStr;
}else if (bodyObj[i][0] == 'section') {
let newStr = `<x-blogsectionheader msg='`+ bodyObj[i][1] +`'> @endComponentClass
`;
str += newStr;
}else if (bodyObj[i][0] == 'code') {
let newStr = `
<x-blogcodebox tag='`+ bodyObj[i][1] +`' title='`+ bodyObj[i][2] +`'
msg='
`+ bodyObj[i][3] +`
'> @endComponentClass
`
str+= newStr;
}
}
if (lengthOfLinks > 0) {
str +=`
<br>
<div class='helpful-links-box'>
<h4 class='link-title'>Some Helpful links</h4>
<hr>
`
for (var i = 0; i < lengthOfLinks; i++) {
let newStr = `
<x-bloglink
link='`+ linkObj[i][0] +`'
msg='`+ linkObj[i][1] +`'> @endComponentClass
`
str += newStr;
}
str += `</div>`
str += `
</article>
<x-blogarrows> @endComponentClass
<x-blogjavascript> @endComponentClass
</body>
</html>
`
}else{
str += `
</article>
<x-blogarrows> @endComponentClass
<x-blogjavascript> @endComponentClass
</body>
</html>
`
}
return str;
}
This function will go through and create the HTML elements that will create the blog based on all the elements. It will go through the body object first and then the link element. Once the string is returned it will get concatenated into the head object and pass the HTML document that I need
