Javascript 将新样式应用于文本时保留文本区域中的换行符

我需要将用户输入的文本区域内容输出到页面，同时保持换行符完整（这是有效的）。然后我需要在不丢失换行符的情况下对不同的单词应用特定的样式（这不起作用）

我已经把所有的事情都弄清楚了，除了当我去应用样式时，换行符丢失了

我使用以下代码将用户在文本区域中写入的内容输出到屏幕：

$(window).load(function(){
$('.content:not(.focus)').keyup(function(){                 


var value = '<h3>' + $(this).val() + '</h3>';
var contentAttr = $(this).attr('name');

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));

})

});

另外，请原谅我。我不是javascript专家，我已经通过研究stackoverflow和JSFIDLE.net了解了如何完成我目前所做的工作。我认为解决方案可能并不遥远，但我无法解决。非常感谢您的帮助

---

[更新的FIDDLE链接和JS]看看这个

我认为问题在于，在调用.text（）函数时，您正在剥离
标记

解决这一问题的一种方法是使用一个标记来解析它们，如下所示：

function myFunction(m1, m2, m3, m4, m5, m6, m7, m8, m9) {
    var $h3 = $('h3');
    var marker = ' ### ';
    var wordsHtml = $('h3').html().replace(/(\<br(\s)*(\/)*\>)/g, marker);
    var groups = wordsHtml.split(marker);
    var newHtml = '';
    for (var g = 0; g < groups.length; g++) {
        var words = groups[g].split(' ');
        for (var i = 0; i < words.length; i++) {
            if (i % m1 == 0 || i % m2 == 0 || i % m3 == 0 || i % m4 == 0 || i % m5 == 0 || i % m6 == 0 || i % m7 == 0 || i % m8 == 0 || i % m9 == 0) {
                newHtml += ' <span>' + words[i] + '</span>';

            }
            else {
                newHtml += words[i];
            }
        }
        // if not last group
        if (g != (groups.length - 1)) {
            //add a br tag
            newHtml += '<br />';
        }
    }
    $h3.html(newHtml);

};

功能myFunction（m1、m2、m3、m4、m5、m6、m7、m8、m9）{
变量$h3=$（'h3'）；
变量标记='####'；
var wordsHtml=$（'h3'）.html（）.replace（/（\）/g，marker）；
变量组=wordsHtml.split（标记）；
var newHtml=''；
对于（var g=0；g

以下是您的小提琴的更新：

---

我尝试了这个选项，但按下按钮后仍然无法保留换行符。不确定原因。非常感谢！它有时似乎有效，但在其他时候无效。例如，我尝试了：没有一本书有时间。来表达无私的感觉。这听起来是一种更好的方式。可以得到你想要的东西。这不是最好的方式很抱歉，我上面不清楚。但是在前面的例子中，每过一个句号，我都会放一个换行符，在我按下任何按钮后，它都不会出现。我用一些看起来更好的更改更新了代码片段和小提琴链接。

h3 span {
font-weight: bold;
color: black;
background: black;
}


h3 span:hover {
color: white;
background: black;
} 

function myFunction(m1, m2, m3, m4, m5, m6, m7, m8, m9) {
    var $h3 = $('h3');
    var marker = ' ### ';
    var wordsHtml = $('h3').html().replace(/(\<br(\s)*(\/)*\>)/g, marker);
    var groups = wordsHtml.split(marker);
    var newHtml = '';
    for (var g = 0; g < groups.length; g++) {
        var words = groups[g].split(' ');
        for (var i = 0; i < words.length; i++) {
            if (i % m1 == 0 || i % m2 == 0 || i % m3 == 0 || i % m4 == 0 || i % m5 == 0 || i % m6 == 0 || i % m7 == 0 || i % m8 == 0 || i % m9 == 0) {
                newHtml += ' <span>' + words[i] + '</span>';

            }
            else {
                newHtml += words[i];
            }
        }
        // if not last group
        if (g != (groups.length - 1)) {
            //add a br tag
            newHtml += '<br />';
        }
    }
    $h3.html(newHtml);

};