Question

我想知道为什么如果我在textarea中设置一些粗体，那么当我在我的div中复制它时，它会显示<b>word</b>而不是 word 。

我写道，如果你用按钮设置一个粗体字，它会在textarea中以粗体显示。然后，如果按“确定”按钮，也会显示在新的div中，但不会以粗体显示。

如何以粗体显示隐藏代码的单词？

我的代码：

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;
}

Answer 1

我不知道这个解决方案是否可以接受。无论如何：

＆＃13;

$('#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;
}

＆＃13;

#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;
}

＆＃13;

<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'>

＆＃13;

Answer 2

您需要考虑只构建一个字符串，然后附加它而不是在forEach中附加每个单词。例如，通过连接字符串，如下所示： ...

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

... 默认情况下附加后，标签将自动关闭。

使div能够显示粗体字

2 个答案: