Context
I have a website where users can create articles and other users can come in and highlight the articles, allowing them to comment on the highlight. After a user selects the article text, I want to get the HTML content of the selected text. After doing so, I want to check the text against the article's HTML to see if the article matches. I do this because I use .cloneContents() to get the HTML of the selected text, which automatically closes all nodes to make the string make sense. I do this by first getting the selection:
if (window.getSelection) {
sel = window.getSelection();
}
I then run this through the function getSelectionHTML, which returns the HTML of the selected text:
function getSelectionHTML() {
var html = "";
if (typeof window.getSelection != "undefined") { //for non-IE browsers
var sel = window.getSelection(); //get selection
if (sel.rangeCount) { //if selection was made?
var container = document.createElement("div"); //create element to add content to
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents()); //get stuff and clone contents (???)
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") { //for IE < 9
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
Both of these functions work well. After assigning the result of getSelectionHTML to the variable selectedHTML, I check if the selected HTML from this variable matches the article by calling var exists = checkIfTextExists(selectedHTML)
function checkIfTextExists(highlight) {
let $text = $("#articleContents");
let textCurrent = $text.html().trim();
let textToHighlight = highlight;
let ifTextExists = textCurrent.indexOf(textToHighlight) > -1;
if (ifTextExists) { //if text exists
return true;
} else {
return false;
}
}
If the text exists in the article, I highlight the matching text in the article. If it doesn't, I run it through the function cutContent(), which cuts the end tag off of the HTML string:
function cutContent(selectedHTML) {
var str = selectedHTML;
var tag = str.lastIndexOf("</");
var splitContent = str.substring(0, tag);
var check = checkIfTextExists(splitContent);
if (check === true) {
return splitContent;
} else {
cutContent(splitContent);
}
}
If the cut text goes through the checkIfTextExists() function and returns true, I insert the highlight. However, if it returns false, I call cutContent() again, which runs that function again. The problem is that, when I set the variable var highlightHTML = cutContent(selectedHTML) and console.log(highlightHTML), it returns undefined instead of the cut value. This only seems to happen when the function checkIfTextExists() is called at least once from the function cutContent().
Question
Why does my function return undefined instead of the cut content? What is it about my syntax that disallows me from calling a function in a variable (var exists = checkIfTextExists(selectedHTML)), then calling another function from that function, and then going back to the first function and returning the new value that comes out once the function runs? Let me know if there are any questions. Thanks.
