Как я могу перебрать каждое слово в элементе, а затем условно обернуть совпадения?

Я пишу в своем блоге на ASP.NET и использую встраивание Gist для мои кодовые блоки. Я хотел бы раскрасить код, чтобы он соответствовал тому, как конкретный язык отображается в его IDE. В частности, Swift в Xcode.

Я начал с jsFiddle и дошел до того, что выбрал «var» и сделал его красным, но в примере, который я нашел для перебора слов и их переноса, используется значение return, которое прерывает цикл.

update: оператор return, который я нашел здесь, вызывает синтаксическую ошибку. Я адаптировал код из эту публикацию и с удовольствием рассмотрю альтернативы.

Как я могу перебрать каждое слово на экране и условно обернуть их?

Я могу сопоставить одно слово, но не могу найти способ продолжить операцию. Для простоты давайте найдем только два слова: var и override.

мой код:

var line = $('.line');

$.each(line, function(i, val){
   var value = $('.line').text();

    $("*:contains('var')").html(function(_, html) {

        return html.replace(/(var)/g, '<span style="color:red;">$1</span>');
    });

    $("*:contains('override')").html(function(_, html) {

        return html.replace(/(override)/g, '<span style="color:blue;">$1</span>');
    });
});

мой jsFiddle.


html jquery contains each replace
person Dan Beaulieu    schedule 17.05.2015    source источник
comment
Ты консоль открывал?   -  person adeneo    schedule 17.05.2015
comment
Я работал с открытой консолью, я новичок в jQuery, поэтому я обычно работаю на основе положительных отзывов из console.logs.   -  person Dan Beaulieu    schedule 17.05.2015
comment
синтаксическая ошибка, я только предполагаю, что это (_, html)   -  person Dan Beaulieu    schedule 17.05.2015
comment
Кажется, есть проблема с тем, что возвращается в функцию html?   -  person adeneo    schedule 17.05.2015
comment
Я обновил свой пост, чтобы включить ссылку на ссылку, где я нашел код, который я адаптировал.   -  person Dan Beaulieu    schedule 17.05.2015
comment
Кроме того, замены слишком велики, * соответствует всем, а внешние элементы содержат одни и те же элементы несколько раз, поэтому замены происходят несколько раз и т. д. Вы должны каким-то образом отфильтровать элементы, чтобы получить только элементы без дочерних элементов, а затем выполните замена на тех.   -  person adeneo    schedule 17.05.2015
comment
например $('.line:содержит('var')')? РЕДАКТИРОВАТЬ: я думаю, что это только что решило мою проблему   -  person Dan Beaulieu    schedule 17.05.2015
comment
Нет, скорее так -› jsfiddle.net/91xrosxa/3   -  person adeneo    schedule 17.05.2015
comment
этот код имеет больше смысла... спасибо, аденео   -  person Dan Beaulieu    schedule 17.05.2015
comment
@adeneo - вы можете опубликовать это как ответ?   -  person Trent    schedule 17.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть цикл, который перебирает каждую строку, и внутри этого цикла вы выбираете все элементы, содержащие слово, в каждой итерации, заставляя замену выполняться много раз.

Выполните итерацию один раз, и это можно сделать с помощью обратного вызова html(), поскольку он выполняет внутреннюю итерацию и выполняет замены в том же цикле.

$('.line').html(function(_, html) {
    html = html.replace(/(var)/g, '<span style="color:red;">$1</span>');
    html = html.replace(/(override)/g, '<span style="color:blue;">$1</span>');

    return html;
});

FIDDLE

person adeneo    schedule 17.05.2015