#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, чтобы узнать, во что преобразован фактический тег текстовой области содержимого.