jQuery DOM解析器？ [英] jQuery DOM parser?

问题描述

我有一个jQuery脚本调用Yahoo Boss API，并检索与种子关键词短语相关的关键字列表。一旦脚本具有关键字列表，我就将这些关键字写入屏幕，每个标签中都有一个span标签，允许用户将它们添加到他们的帖子/页面内容（WordPress）中。

脚本工作非常好，现在我想加强它，以便我可以在列表中突出显示一个关键字，如果它已经出现在正在编辑的内容中。

我需要做的是解析textarea（WordPress内容编辑器）的内容，以及内容中存在的每个匹配术语，我需要在关键字的span标签中应用特殊样式LSI列表。

我正在寻找关于使用javascript和jQuery解析WordPress内容的innerText（又名内容sans html标签）的资源或示例的建议编辑器。

例如，我有一个按钮，当点击时，执行以下jQuery，它提取一个关键字列表，然后将它们添加到一个字符串result来写他们到屏幕...

  for（key in keywords）{if（keywords [key]> 5）result + ='< span>'+ key +'，< / span>';} 
  

所以我需要做的是评估循环中返回的每个关键字，如果它出现在内容编辑器（jQuery（'＃content'）。html（））中，如果是这样，我需要添加一个突出分类到跨度。否则，请保留原样。

解决方案

将内容作为HTML字符串，这里将是一种区分大小写的方式它具有上面显示的功能的肉体上的示例变量。

  var content =< div>但是是一个div！< / div>< p>这是一个段落，你喜欢这段吗？< / p>; 
 
 //附加到div以确保有一个顶级标签。 
 var html = $（< div>< / div>）。append（content）.html（）; 
 
 // keywordList是一个div的选择器，包含代表内容的项目的跨度
 $（＃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>段< / span>< br /> 
< span> span< / span>< br /> 
< span> ul< / span>< br /> 
< span> div< / span>< br /> 
< span> ol< / span>< br /> 
< span> table< / span>< br /> 
< / div> 
  

您可以查看此操作。

I've got a jQuery script that calls out to the Yahoo Boss API and retrieves a list of keywords related to a seed keyword phrase. Once the script has the keyword list, I'm then writing these keywords to the screen, each in a span tag to allow the user to add them to their post/page content (WordPress)

The script is working great and now I'd like to enhance it a bit so that I can highlight a keyword in the listing if it already appears inside the content being edited.

What I need to do is to parse the contents of a textarea (the WordPress content editor) and for every matching term that exists in the content, I need to apply a special style to the keyword's span tag in the LSI list.

I'm looking for your suggestions on resources or examples on using javascript and jQuery to parse the innerText (aka content sans html tags) content of the WordPress content editor.

For example, I have a button which when clicked, executes the following jQuery which pulls a listing of keywords, then adds them to a string "result" to write them to the screen...

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

So what I need to do is to evaluate, for each keyword returned inside the loop, if it appears in the content editor (jQuery('#content').html()) and if so, I need to add a highlight class to the span. Otherwise, leave it as is.

解决方案

Given the contents as an HTML string, here would be one case-sensitive way to do it, with filled-in example variables shown above the meat of the function.

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>");
});

Here's the test 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>

You can see this in action.

这篇关于jQuery DOM解析器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！