Basic example

by Abhishek Nandgaonkar

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement -->

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () { 
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("say ${hello}"); 
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
  
  var result = canAnnotate("${hello}")
  var newContent1 = document.createTextNode(result); 
  newDiv.appendChild(newContent1);  
  
}



    // rework the for and if logic, then it should work
    canAnnotate = (fullText, start, end) => {
        if (start > 3 && end <= fullText.length) {
            let expressions = this.getExpressions(fullText);

            for (let expression in expressions) {
                expression = '${' + expression + '}';
                let selection = fullText.substring(start, end);
                let expStart = fullText.indexOf(expression);
                let expEnd = expStart + expression.length;
                if (selection === expression && start === expStart && end === expEnd) {
                    return true;
                }
            }
            return false;
        }
        return false;
    };

    getExpressions = (fullText) => {
        let expressions = [];

        for (let i = 0; i < fullText.length - 1; i = i + 1) {
            if (fullText.charAt(i) === '$' && fullText.charAt(i + 1) === '{') {
                let numOpen = 1;
                for (let j = i + 2; j < fullText.length; j = j + 1) {
                    if (fullText.charAt(j) === '$') {
                        i = j;
                        break;
                    }

                    if (j + 3 <= fullText.length) {
                        let nextThree = fullText.substring(j, j + 3);
                        if (nextThree === "'{'" || nextThree === "'}'") {
                            j = j + 3;
                        }
                    }

                    if...