将新样式应用于文本时，保留textarea的换行符

Question

我需要将文本区域的用户输入内容输出到页面，同时保持换行符完好无损（正在运行）。 然后，我需要对不同的单词应用某种样式，而又不丢失换行符（这不起作用。

我已经弄清楚了一切，除了我要应用样式时，换行符丢失了。 这是Jsfiddle 。

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

$(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/>'));

})

});

然后，当用户按下各种按钮时，我将调用以下功能。 我在这里以某种方式失去了换行符：

function myFunction(m1,m2,m3,m4,m5,m6,m7,m8,m9)
{
var words = $('h3').text().split(' ');
var numWords = words.length;
for (i=0; i<numWords; 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) {
words[i] = '<span>' + words[i] + '</span>';

}
}


$('h3').html(words.join(' '));

我的风格是

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


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

另外，请原谅我。 我不是javascript的专业人士，并且通过研究stackoverflow和jsfiddle.net找出了如何做到目前为止的工作。 我认为解决方案可能并不遥远，但我无法弄清楚。 非常感谢您的帮助！

JSfiddle示例

Answer 1

[更新的FIDDLE LINK和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);

};

这是您的小提琴的更新：

jsFiddle更新