Question

我需要将用户输入的textarea内容输出到页面，同时保持换行符不变（这是有效的）。然后我需要将某种风格应用于不同的单词而不会丢失换行符（这不起作用。

我已经把所有的东西都搞清楚了，除非我去应用这种风格，断线就丢失了。这是Jsfiddle。

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

$(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 example

Answer 1

[UPDATED 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 Update

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

1 个答案: