Обертывание определённых слов

270

15 декабря 2016, 16:27

В данном примере я хочу в тексте выделить слова "true" и "false" синим цветом и изменить размер шрифта. Использую функцию .wrap(), но ничего не получается. В массив слова "true" и "false", обернутые HTML-кодом, не записываются.

CSS:

.a {
    color: #00F;
    font-size: 20px;
}

HTML:

<button>OK</button>
<p id="p1">Hello World true Привет Мир false Hello World true Привет Мир false</p>
<p id="p2"></p>

JS:

$(document).ready(function () {
    //записываем текст в переменную, превращаем строку в массив, в качестве
    //разделителя - пробел
    var str = $('#p1').text().split(' ');
    //создаем пустой массив
    var ara = [];
    for (var i in str) {
        if (str[i] == 'true' || str[i] == 'false') {
            var a = str[i];
            //двойное обертывание, что бы получить HTML код, а не текст
            var b = $(a).wrap('<div class="b"><span class="a"></span></div>');
            //записываем полученный HTML код в массив
            ara[i] = $('.b').html();
        } else {
            ara[i] = str[i];
        }
    }
    $('button').css({ 'cursor': 'pointer' }).click(function () {
        //превращает массив в строку, в качестве разделителя — пробел
        $('#p2').text(ara.join(' '));
    });
});

Теоретически, во второй параграф, при нажатии на кнопку, должен быть записан такой текст:

Hello World <span class="a">true</span> Привет Мир <span class="a">false</span> Hello World <span class="a">true</span> Привет Мир <span class="a">false</span>

Answer 1

Код несколько переусложнён. В частности, с лишними оборачиванием и разворачиванием.
Для #p2 стоит использовать .html(), а не .text(), чтобы вставить именно HTML-код.

$(document).ready(function() { 
    var str = $('#p1').text().split(' '); 
    var ara = []; 
    for (var i in str) { 
        var a = str[i]; 
        if (a == 'true' || a == 'false') { 
            ara[i] = '<span class="a">' + a + '</span>'; 
        } else { 
            ara[i] = a; 
        } 
    } 
    $('button').css({ 'cursor': 'pointer' }).click(function () { 
        $('#p2').html(ara.join(' ')); 
    }); 
});

.a { 
    color: #00F; 
    font-size: 20px; 
}

<button>OK</button> 
<p id="p1">Hello World true Привет Мир false Hello World true Привет Мир false</p> 
<p id="p2"></p> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>