How do you create divs in javascript?

Question

I am given a string as input, and the last letter in every word of the string should be capitalized, and then it is formed into their own div.

The one thing that I am finding tricky is that no matter what the string is there should always be enough divs to be separated, which to me means that I need to have a loop that generates it, which is what I am not sure how to write that logic.

I need this to be the output:

<div>
partY
</div>
<div>
likE
</div>
<div>
itS
</div>
<div>
2015
</div>

This is what I have so far:

function yay (input) {

  input = input.toLowerCase().split("").reverse().join("").split(" ");
  for(var i = 1 ; i < input.length ; i++){
    var len = input[i].length-1;
    input[i] = input[i].substring(0, len) + input[i].substr(len).toUpperCase();
  }
  return input .reverse().join(" ");
}

console.log(yay("Party like its 2015"));

Answer 1

You can use document.createElement('div') and document.createTextNode('text') to simply get what you need.

You can return the content element directly to append to your node of your need, or you can use the innerHTML to do some text manipulations.

EDIT

Modified, I totally missed the last character needs to be uppercase

function yay(str) {
    var arr = str.split(' ');
    var content = document.createElement('div');
    for(var part in arr) {
      var sub = document.createElement('div');
      var lastChar = arr[part].charAt(arr[part].length-1).toUpperCase();
      var appendStr = arr[part].substring(0,arr[part].length-1);
      sub.appendChild(document.createTextNode(appendStr+lastChar));
      content.appendChild(sub);
    }
    return content.innerHTML;
}
console.log(yay("Party like its 2015"));

Answer 2

Well, just a few minor changes to your code, which was on the right track... I basically removed the unnecessary reversing and wrapped each word in a div in the loop and viola:

function yay (input) {

  input = input.toLowerCase().split(" ");
  for(var i = 0 ; i < input.length ; i++){
    var len = input[i].length-1;
    input[i] = '<div>'+input[i].substring(0, len) + input[i].substr(len).toUpperCase()+'</div>';
  }
  return input.join("");
}

console.log(yay("Party like its 2015"));
document.write(yay("Party like its 2015"));

Output:

<div>partY</div><div>likE</div><div>itS</div><div>2015</div>

Answer 3

How about this:

function capitalizeLastLetter(input) {
    return input.substring(0, input.length - 1) + input.charAt(input.length - 1).toUpperCase();
}

function yay(input) {
  return input
    .toLocaleLowerCase()
    .split(" ")
    .map(function(s){ return "<div>" + capitalizeLastLetter(s) + "</div>"; })
    .join("");
}

console.log(yay("Party like its 2015"));
document.write(yay("Party like its 2015"));

Remixes this answer on how to capitalize the first letter of a word.

Add newlines where appropriate if you actually need those in your output.

Answer 4

You might want to use String.prototype.replace and feed it with a regular expression:

function yay(input) {
  return input.
         toLocaleLowerCase().
         replace(/([^\s.,:;!?]*)([^\s.,:;!?")])([^\s]*)/g,
             function(match, sub1, sub2, sub3) {
           return '<div>' + sub1 + sub2.toLocaleUpperCase() + sub3 + '</div>';
         });
}

The regex captures zero or more (because regular expressions are "greedy" by default, the algorithm will capture as many characters as it can) non-whitespace (to support alphabets other than Latin) and non-punctuation characters and exactly one non-whitespace/non-punctuation character following them (the last letter in the word, even if it's the only letter forming the word). The last group is zero or more of the previously specified punctuation marks (.,:;!?")). What it says is "non-whitespace character", but the presence of the two previous parenthesized groups implies that it must be a punctuation mark.

The replacement callback here uses four arguments, one (unused in this case) for the entire match and three for submatches corresponding to the parenthesized groups in the regex.

The value returned from the callback replaces the entire match in each successive replacement cycle (abcd in abcd efgh will be replaced with <div>abcD</div> and so on, note that whitespaces will be preserved).

In the callback function, the first submatch consists of all the letters in a word except the last one. It is returned as is, but the other match (which is the last letter) is capitalized. Optionally, a punctuation mark is appended if present in the original input. Everything is then wrapped in the <div> HTML tag and returned.

You can assign the value returned by the yay function to the innerHTML property of an HTML element, for example:

document.querySelector('#container').innerHTML = yay('Party like its 2015');

Spaces present in the input will remain. There is no need to replace them with new line characters, as all whitespaces are treated equally in HTML and will result in the same behavior.

 

Edit: Now you can pass input containing punctuation to the function. The following line:

yay('Hello there, how about using some punctuation? "Quote" (Parentheses) ("What?")')

will result in:

'<div>hellO</div> <div>therE,</div> <div>hoW</div> <div>abouT</div> <div>usinG</div> <div>somE</div> <div>punctuatioN?</div> <div>"quotE"</div> <div>(parentheseS)</div> <div>("whaT?")</div>'