CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Niccolò Guidi
Niccolò Guidi

Reputation: 195

Make a div able to display bold words

I'm wondering why if I set something bold in my textarea, Then when I copy it in my div it shows <b>word</b> instead of word.

I wrote that if you set a word in bold with the button, it is displayed in bold in the textarea. Then if you press the button "OK", is displayed also in a new div but not in bold.

How can I show the word in bold hiding the code?

My code:

JSfiddle

Html:

<div id="faketxt" contenteditable>Write Here Guys</div>
<button id='btn'>OK</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>

<div id='boxes'>
</div>

CSS:

#faketxt {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

.fakes{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
  display:inline-block;
}

#boxes{
  display : flex;
  display:inline-block;
}

JQuery:

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var words = primo.innerHTML.replace(/(&lt;([^&gt;]+)&gt;)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}

Upvotes: 0

Views: 648

Answers (2)

noise
noise

Reputation: 83

I don't know if this solution can be considered acceptable. Anyway:

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var toWrite = $('#faketxt').html();
  var words = primo.innerHTML.replace(/(&lt;([^&gt;]+)&gt;)/ig, "").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    var bold = false;
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }

      if (word.indexOf('<b>') != -1) {
        bold = true;
      }

      if (bold) {
        $(div).html($(div).html() + '<b>' +
          word + '</b>');
      } else {
        $(div).html($(div).html() +
          word);
      }

      if (word.indexOf('</b>') != -1) {
        bold = false;
      }
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}
#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}
.fakes {
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
  display: inline-block;
}
#boxes {
  display: flex;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faketxt" contenteditable>Write Here Guys</div>
<button id='btn'>OK</button>
<button onclick="document.execCommand( 'bold',false,null);" class="fontStyle" title="Bold Highlighted Text"><b>B</b>
</button>

<div id='boxes'>

Upvotes: 2

Fede Rodriguez
Fede Rodriguez

Reputation: 23

You need to think about building only one string and then append it instead of appending each word inside the forEach. For example by concatenating the string like this: ...

var newHtml = "";
words.forEach(function(word) {
    if (++count > wordLimit) {
        count = 1;
        div = createDiv();
    }
    if(newHtml !== ""){
        newHtml += ' ';
    }
    newHtml += word;
});
$(div).append(newHtml);

... After append by default the tag will be close automatically.

Upvotes: 0

Related Questions