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

Question

I need to output the user-entered contents of a textarea to the page while keeping line breaks intact (which is working). Then I need to apply a certain style to different words without losing the linebreaks (which is not working.

I have figured everything out except when I go to apply the style the line breaks are lost. Here is the Jsfiddle .

I am outputting what the user writes in the textarea to the screen with the following code:

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

})

});

Then when I user presses various buttons I am calling the following function. It is here that I somehow lose the line breaks:

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

The style I have is

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


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

Also, please forgive me. I am not a pro at javascript and have figured out how to do what I have done so far by researching stackoverflow and jsfiddle.net. I think the solution might not be far away but I cannot figure it out. Thank you so much for helping out!

JSfiddle example

Answer 1

[UPDATED FIDDLE LINK and JS] Take a look at this

I believe that the problem is that you are stripping out your
tags when you are calling the .text() function.

One way to solve for this would be to parse them in and out with a marker, like this:

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);

};

Here is an update to YOUR fiddle:

jsFiddle Update