【发布时间】：2009-04-07 19:30:25
【问题描述】：
我想知道如何搜索文档中的任何文本并使用 jQuery 将其包装在链接结构中。
例如 - 在整个文档中搜索文本“目标心率”并将其转换为
<a href="jvscrt:popup('heartrate.cfm')">target heart rate</a>
有什么想法吗？
谢谢！ 克里斯
【问题讨论】：
标签： jquery
【发布时间】：2009-04-07 19:30:25
【问题描述】：
这很接近：
var findIt = 'Javascript';
$.expr[":"].containsNoCase = function(el, i, m) {
var search = m[3];
if (!search) return false;
// we'll use text to find what we want...
return eval("/" + search + "/ig").test($(el).text());
};
$("p:containsNoCase('"+ findIt +"')").each(function() {
// and then html when we are ready to replace
var ht = $(this).html();
var pos= ht.indexOf(findIt);
var start = ht.substring(0, pos);
var end = ht.substring(pos+findIt.length);
$(this).html(
start
+'<a href="javascript:alert(\'heartrate.cfm\')">'+findIt+'</a>'+end);
});
但是您要寻找的东西很难提供。您只想搜索元素的文本，但需要更新找到它的元素的 HTML 内容（以添加链接）。当您返回并使用 html() 更新元素时，您最终可能会替换您不希望的内容。
例如这很好：
<p>Hey, Javascript is fun.</p>
这有什么问题：
<p><img src="something/Javascript.png">Whee, yaa Javascript</p>
图像 src 中的文本被错误地替换。如果有一种方法可以找到匹配文本在未被包围的元素内或标签内的位置，则可以干净地替换它。当然你可以使用 text()，但是你不能在你添加回来的内容中使用任何 HTML :(。也许我会回来看看是否有人可以提供其他任何东西。
【讨论】：
-
这是非常有用和有趣的。我不确定其中一些是做什么的，但我似乎得到了大部分。我完全理解替换错误内容的问题 - 但是在这种情况下，我无法预见文本本身有任何误解。非常感谢！我会告诉你结果如何。
【讨论】：
jQuery wrap 函数可能吗？
还要考虑突出显示关键字的text highlight plugin。您可以使用它们创建链接，而不是突出显示。更具体地说，以下几行：
var spannode = document.createElement('span');
spannode.className = 'highlight';
// change the above to create an anchor and add href etc
【讨论】：
您需要：
有一个转换规则 - 即“要转换的文本”-- url -> “convert.cfm”。您可以通过一个简单的哈希数组来实现这一点。
现在，您需要搜索所有匹配的 DOM 元素中包含的 text()。如果找到了，则需要将内容分成 3 部分：文本前后 + 文本本身。
现在创建锚点并将三个部分连接在一起并替换旧内容。
例如，在大多数客户端脚本中，文本突出显示就是这样完成的。
由于您只是想提出一个想法，我将把有趣的编码留给自己；）
【讨论】：
-
我希望的不仅仅是一个想法。我有这个想法——我只是不知道在 jQuery 中从哪里开始搜索文本。现在你把它分解得很好，我不知道如何替换内容。但我想我可以搜索一个名为 replace 的不错的小功能，看看我得到了什么：) thx
-
您可以将内容替换为 .text() 或 .html()，具体取决于您的内容是否包含 HTML 标签。首先使用 text() (var text = element.text()) 获取内容，然后使用标准 JavaScript 函数进行拆分和连接，然后使用 element.text(newText) 设置回来。希望有帮助:)
将 find 方法与 contains 一起使用。可能是这样的
$("p").find(":contains('target heart rate')")
.wrapInner($("<a href="jvscrt:popup('heartrate.cfm')"></a>"));
或类似的东西。
我可能完全错了。检查http://docs.jquery.com
【讨论】：
-
这很有趣。我试图弄清楚 - 但似乎这将替换 p 标签中的所有内容。不幸的是，我不能拥有它。但也许我可以让用户输入 target heart rate 并对其进行编辑。文本是从数据库中提取的，所以我无法真正控制它
【讨论】：