Question

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

该脚本运行良好，现在我想稍微增强它，以便我可以在列表中突出显示一个关键字，如果它已经出现在正在编辑的内容中。

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

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

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

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

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

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>

你可以see this in action。

Answer 2

内容文本区域可能会动态转换为iframe以用于高级编辑功能，您可能需要使用jquery中的contents函数来获取和操作iframe内容。使用firebug查找内容文本区域的实际标记转换为。

jQuery DOM解析器？

2 个答案: