在对文本应用新样式时保留文本区域的换行符

Preserving line breaks from textarea when applying new styles to the text

本文关键字：文本 保留 区域 换行符 应用 新样式 样式      更新时间：2023-09-26

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

我已经弄清楚了一切，除了当我去应用样式时，断行丢失了。

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

$(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示例

[UPDATED FIDDLE LINK and 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更新

相关文章：