JQuery DOM парсер?

Question

У меня есть скрипт jQuery, который обращается к API Yahoo Boss и извлекает список ключевых слов, связанных с ключевой фразой семени.После того, как в скрипте есть список ключевых слов, я пишу эти ключевые слова на экран, каждое в теге span, чтобы пользователь мог добавить их к своему содержанию записи / страницы (WordPress)

Сценарий работаетотлично, и теперь я хотел бы немного его улучшить, чтобы я мог выделить ключевое слово в списке, если оно уже появляется внутри редактируемого контента.

Что мне нужно сделать, это проанализировать содержимоеtextarea (редактор контента WordPress) и для каждого соответствующего термина, который существует в контенте, мне нужно применить специальный стиль к тегу span ключевого слова в списке LSI.

Я ищу ваши предложения по ресурсамили примеры использования javascript и jQuery для синтаксического анализа содержимого innerText (aka content sans html) редактора содержимого WordPress.

Например, у меня есть кнопка, которая при нажатии запускает следующий jQuery, который вытягивает листингключевых слов, а затем добавляет их в строку «результат», чтобы записать их на экран ...

for (key in keywords){if (keywords[key] > 5) result += '<span>' + key + ',</span>';}

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

Answer 1

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

var content = "<div>But this is a div!</div><p>This is a paragraph.  Do you like this paragraph?</p>";

// append to a div to make sure there's a top-level tag.
var html = $("<div></div>").append(content).html();

// keywordList is a selector for a div containing spans of items representing the contents
$("#keywordList").find("span").filter(function() {
    return html.indexOf($(this).html()) != -1;
}).each(function() {
    $(this).html("<span class='highlight'>" + $(this).html() + "</span>");
});

Вот тестовый HTML:

<div id="keywordList">
    <span>paragraph</span><br />
    <span>span</span><br />
    <span>ul</span><br />
    <span>div</span><br />
    <span>ol</span><br />
    <span>table</span><br />
</div>

Вы можете увидеть это в действии .

Answer 2

Текстовая область содержимого может динамически преобразовываться в iframe для расширенных функций редактирования, и вам может потребоваться захватить и управлять содержимым iframe с помощью функции contents в jquery.Используйте firebug, чтобы узнать, во что конвертируется фактический тег текстовой области содержимого.