使用jQuery包装文本

使用jQuery包装文本,jquery,Jquery,我想知道如何搜索文档中的任何文本,并使用jQuery将其包装在链接结构中 例如,在整个文档中搜索文本“目标心率”,并将其转换为 <a href="jvscrt:popup('heartrate.cfm')">target heart rate</a> 有什么想法吗 谢谢! 克里斯你需要: 有一个转换规则-即“要转换的文本”--url->“convert.cfm”。您可以通过一个简单的哈希数组来实现这一点 现在,您需要搜索包含在所有匹配DOM元素中的text()。如

我想知道如何搜索文档中的任何文本,并使用jQuery将其包装在链接结构中

例如,在整个文档中搜索文本“目标心率”,并将其转换为

<a href="jvscrt:popup('heartrate.cfm')">target heart rate</a>

有什么想法吗

谢谢! 克里斯

你需要:

  • 有一个转换规则-即“要转换的文本”--url->“convert.cfm”。您可以通过一个简单的哈希数组来实现这一点

  • 现在,您需要搜索包含在所有匹配DOM元素中的text()。如果你找到了,你需要将内容分成3部分:文本前后+文本本身

  • 现在创建锚定并将三个部分连接在一起,并替换旧内容

例如,在大多数客户端脚本中,文本highlighint就是这样完成的

既然你只是想提出一个想法,我就把有趣的编码留给你自己;)

您需要:

  • 有一个转换规则-即“要转换的文本”--url->“convert.cfm”。您可以通过一个简单的哈希数组来实现这一点

  • 现在,您需要搜索包含在所有匹配DOM元素中的text()。如果你找到了,你需要将内容分成3部分:文本前后+文本本身

  • 现在创建锚定并将三个部分连接在一起,并替换旧内容

例如,在大多数客户端脚本中,文本highlighint就是这样完成的


既然你只是想提出一个想法,我就把有趣的编码留给你自己;)

将find方法与contains一起使用。大概是

$("p").find(":contains('target heart rate')")
      .wrapInner($("<a href="jvscrt:popup('heartrate.cfm')"></a>"));
$(“p”).find(:contains('target heartrate'))
.wrapInner($(“”);
或者类似的


我可能完全错了。选中

将查找方法与包含一起使用。大概是

$("p").find(":contains('target heart rate')")
      .wrapInner($("<a href="jvscrt:popup('heartrate.cfm')"></a>"));
$(“p”).find(:contains('target heartrate'))
.wrapInner($(“”);
或者类似的

我可能完全错了。是否检查jQuery函数

也考虑哪些高亮关键词。您可以使用它们创建链接,而不是突出显示。更具体地说,以下几行:

var spannode = document.createElement('span');
spannode.className = 'highlight';
// change the above to create an anchor and add href etc
也许是jQuery函数

也考虑哪些高亮关键词。您可以使用它们创建链接,而不是突出显示。更具体地说,以下几行:

var spannode = document.createElement('span');
spannode.className = 'highlight';
// change the above to create an anchor and add href etc
这很接近:

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

});
var findIt='Javascript';
$.expr[“:”].containsNoCase=函数(el,i,m){
var搜索=m[3];
如果(!search)返回false;
//我们将使用文本来找到我们想要的。。。
返回eval(“/”+search+“/ig”).test($(el.text());
};  
$(“p:containsNoCase(“+findIt+”)))。每个(函数(){
//然后在我们准备替换时使用html
var ht=$(this.html();
var pos=ht.indexOf(findIt);
var start=ht.子串(0,位置);
var end=ht.子字符串(位置+findIt.长度);
$(this.html)(
开始
+“+”结束);
});
但你所寻找的是一件很难提供的事情。您只想搜索元素的文本,但需要更新找到它的元素的HTML内容(以便添加链接)。当您返回并使用html()更新元素时,最终可能会替换您不想替换的内容

例如,这很好:

<p>Hey, Javascript is fun.</p>
嘿,Javascript很有趣

如有问题:

<p><img src="something/Javascript.png">Whee, yaa Javascript</p>
是的,是的

图像src中的文本被错误地替换。如果有一种方法可以找到匹配文本在未被标记包围的元素内或标记内的位置,则可以干净地替换它。当然,您可以使用text(),但是您不能在您要添加的内容中使用任何HTML:(。也许我会检查一下,看看是否有人可以提供任何其他内容。

这很接近:

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

});
var findIt='Javascript';
$.expr[“:”].containsNoCase=函数(el,i,m){
var搜索=m[3];
如果(!search)返回false;
//我们将使用文本来找到我们想要的。。。
返回eval(“/”+search+“/ig”).test($(el.text());
};  
$(“p:containsNoCase(“+findIt+”)))。每个(函数(){
//然后在我们准备替换时使用html
var ht=$(this.html();
var pos=ht.indexOf(findIt);
var start=ht.子串(0,位置);
var end=ht.子字符串(位置+findIt.长度);
$(this.html)(
开始
+“+”结束);
});
但是,您要查找的内容很难提供。您只想搜索元素的文本,但需要更新找到它的元素的HTML内容(以便添加链接)。当您返回并使用HTML()更新元素时,您最终可能会替换您不想替换的内容

例如,这很好:

<p>Hey, Javascript is fun.</p>
嘿,Javascript很有趣

如有问题:

<p><img src="something/Javascript.png">Whee, yaa Javascript</p>
是的,是的

图像src中的文本被错误地替换。如果有一种方法可以在未被标记包围的元素或标记中找到匹配文本的位置,则可以干净地替换它。当然,您可以使用text(),但不能在要添加回的内容中使用任何HTML:(.也许我会回去看看有没有人还有什么可以提供的。

我真是个胆小鬼:

你可以用这个来完成工作。只要用你的锚(你的链接)元素改变包装就可以了。

我就是这样一个gomer:


您可能可以使用它来完成工作。只需使用锚点(您的链接)元素更改包装即可。

刚刚发现了一种有趣的方法,可以非常干净地解决此问题:


我在阅读有关的文章时遇到了这个问题。

刚刚发现了一个有趣的方法,可以非常清晰地解决这个问题:


当我读到有关的文章时,我遇到了这个问题。

类似的问题类似的问题我希望得到的不仅仅是一个想法。我有一个想法——我只是不知道是什么