Анализатор jQuery DOM?

#jquery #parsing #dom

#jquery #синтаксический анализ #dom

Вопрос:

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

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

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

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

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

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

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

Комментарии:

1. Когда вы говорите «без HTML-тегов», вы имеете в виду, что это полностью открытый текст, или что это неполный HTML-документ (т. Е. отсутствует <head> )? В частности, это те области, которые вы упомянули в текстовом поле? Возможно, вы получите лучший ответ, если покажете нам пример «до» и того, чего вы надеетесь достичь «после».

2. Привет, Дэйв, мне действительно удалось заставить приведенное выше предупреждение работать должным образом, но оно должно вызываться после загрузки страницы. Это была первая проблема. Что я подразумеваю под sans html, так это то, что я хочу оценивать содержимое только без html-тегов. например, <a title =»foo»> не должен быть частью анализируемого содержимого, так что, если ключевое слово «foo» и оно появляется только в альтернативном тексте html-элемента, я не хочу выделять его как совпадающее.

Ответ №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>
  

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

Комментарии:

1. Вау, довольно милый пример justkt. 1 Спасибо!

2. Justkit, просто для пояснения. Что я хочу сделать, так это выделить список ключевых слов вне редактора содержимого, а не выделять слова внутри содержимого (хотя я думаю, что это будет полезно, но я не хочу изменять разметку только для выделения промежутков, поэтому это должен быть стиль только для среды выполнения). Итак, я хочу выделить ключевое слово там, где оно появляется в списке вне редактора контента, если редактор контента содержит ключевое слово.

3. @Scott B- Я обновил свой пример, чтобы немного лучше соответствовать вашему варианту использования.

4. Просто спасибо. Отличный пример. Я ценю помощь!

5. Насколько сложно сделать поиск нечувствительным к регистру?

Ответ №2:

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