Javascript 使div能够显示粗体字

我想知道为什么如果我在文本区域设置了粗体，那么当我在div中复制它时，它会显示

word

，而不是word

我写道，如果你用按钮设置一个粗体字，它会在文本区域显示为粗体。然后，如果您按下按钮“OK”，也会以新的div显示，但不会以粗体显示

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

我的代码：

Html:

JQuery：

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var words = primo.innerHTML.replace(/(<([^>]+)>)/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;
}

---

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

$（'#btn'）。单击（函数（）{
var primo=document.getElementById（'faketxt'）；
var-wordLimit=145；
var toWrite=$（'#faketxt'）.html（）；
var words=primo.innerHTML.replace（/（[^]+）/ig，”）.split（/\s/）；
如果（字数、长度）{
var计数=0；
var div=createDiv（）；
var bold=假；
words.forEach（函数（word）{
如果（++计数>字数限制）{
计数=1；
div=createDiv（）；
}
if（div.innerHTML）{
第4节附加（“”）；
}
if（单词索引（“”）！=-1）{
粗体=真；
}
如果（粗体）{
$（div.html（$（div.html（）+“”）+
单词+”；
}否则{
$（div.html（$（div.html）（）+
单词）；
}
if（单词索引（“”）！=-1）{
粗体=假；
}
});
}
});
函数createDiv（）{
div=document.createElement（'div'）；
div.className=‘赝品’；
document.getElementById（'box'）.append（div）；
返回div；
}

#faketxt{
-moz外观：textfield多行；
-webkit外观：textarea；
边框：1px纯色灰色；
高度：28px；
溢出：自动；
填充：2px；
调整大小：两者；
宽度：400px；
}
.赝品{
宽度：150px；
高度：300px；
字体大小：10px；
边框样式：实心；
显示：内联块；
}
#盒子{
显示器：flex；
显示：内联块；
}

写在这里，伙计们
好啊
B

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

$（'#btn'）。单击（函数（）{
var primo=document.getElementById（'faketxt'）；
var-wordLimit=145；
var toWrite=$（'#faketxt'）.html（）；
var words=primo.innerHTML.replace（/（[^]+）/ig，”）.split（/\s/）；
如果（字数、长度）{
var计数=0；
var div=createDiv（）；
var bold=假；
words.forEach（函数（word）{
如果（++计数>字数限制）{
计数=1；
div=createDiv（）；
}
if（div.innerHTML）{
第4节附加（“”）；
}
if（单词索引（“”）！=-1）{
粗体=真；
}
如果（粗体）{
$（div.html（$（div.html（）+“”）+
单词+”；
}否则{
$（div.html（$（div.html）（）+
单词）；
}
if（单词索引（“”）！=-1）{
粗体=假；
}
});
}
});
函数createDiv（）{
div=document.createElement（'div'）；
div.className=‘赝品’；
document.getElementById（'box'）.append（div）；
返回div；
}

#faketxt{
-moz外观：textfield多行；
-webkit外观：textarea；
边框：1px纯色灰色；
高度：28px；
溢出：自动；
填充：2px；
调整大小：两者；
宽度：400px；
}
.赝品{
宽度：150px；
高度：300px；
字体大小：10px；
边框样式：实心；
显示：内联块；
}
#盒子{
显示器：flex；
显示：内联块；
}

写在这里，伙计们
好啊
B

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

。。。

---

默认情况下，追加后标记将自动关闭。

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

。。。

---

---

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

这是拆分

primo

->

words=[“写入”、“此处”、“伙计们”]

内容后的

words

的内容？你是什么意思？我猜内容没有正确转义。您是在寻找jQuery还是纯javascript解决方案？@Andreas我该如何解决它？@Bingla jQuery解决方案这是在拆分

primo

->

words=[“Write”，“Here”，“Guys”]

的内容之后

的内容？你是什么意思？我猜内容没有正确转义。您是在寻找jQuery还是纯javascript解决方案？@Andreas我如何修复它？@Bingla jQuery解决方案为什么您认为这不可接受？因为它不会在循环中“构建”div内容。相反，它会事先保存html，然后将其复制到div中。您可以使用循环来完成吗？不改变这种机制？因为如果我将世界限制设置为1，我想在这种情况下显示3个div（有3个单词的情况）…这会将单词附加到元素。不知道是否可以接受$html（$（div.html（）+word）；我认为这是您需要的修复（添加float:left；到您的divcss）：为什么您认为这不可接受？因为它不会在循环中“构建”div内容。相反，它会事先保存html，然后将其复制到div中。您可以使用循环来完成吗？不改变这种机制？因为如果我将世界限制设置为1，我想在这种情况下显示3个div（有3个单词的情况）…这会将单词附加到元素。不知道是否可以接受$html（$（div.html（）+word）；我认为这是您需要的修复（添加float:left；到您的divs css）：如果我将单词限制设置为1，它就不起作用了，看：是的，它起作用了，问题是另一个no与粗体字符串有关。检查条件以及调用createDiv函数的位置和时间。如果我将单词限制设置为1，则它不起作用，请看：是的，它起作用了，问题是另一个与粗体字符串相关的否。检查条件以及调用createDiv函数的位置和时间。
#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;
}

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var words = primo.innerHTML.replace(/(<([^>]+)>)/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;
}

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