Question

提前感谢您的帮助。

我一直在浏览器扩展（一个新手），我一直试图找出一些单词交换问题;具体来说，我试图做一些类似于rebus的事情。

我在纯文本页面上测试了我的代码，它可以工作。但是，当它成为一个扩展时，它基本上会丢失页面上的样式并将其转换为仅文本。

我一直在寻找一种更加不引人注目的方式来将像鞋子这样的单词换成鞋子的形象。我一直在使用jQuery并使用文档来完成我在下面已经做过的事情。

$(document).ready(function () {
    var newText = $("body").text().split(" "); 
    $.each(newText, function(index, value) {
        if (newText[index] === "shoe") {
            newText[index] = "<img src='http://.../shoe.png' alt='shoe'>";
        }
    });
    var altText = newText.join("</span> <span>");
    $("body").html(altText);
});

我明白我在做什么：撕掉文字然后再推回去。但是我不知道应该用什么。

我知道replaceWith()功能，我认为这是正确的功能。但是，我如何首先得到“鞋子”的话？

由于

Answer 1

我不知道jQuery在这里是否有很多帮助。你最好可能只是在完整的html上做一个替换...用一些（可能是坏的）笔记和警告。

1）理想情况下，你只能通过jQuery使用text()，但是在你拥有文本后，你没有简单的方法将它放回去。 this is <span>my</span> dog =＆gt; this is my <img src="dog.jpg"> ..失去你的跨度。

2）如果您的html标签包含您要替换的单词，则替换完整的html会很糟糕！ <div id="dog"> =＆gt; <div id="<img src="dog.jpg">">呃！

3）在正则表达式中使用单词边界分隔符\bshoe\b来匹配整个单词，以防止：catastrophe =＆gt; <img src="cat.jpg">astrophe

实施例： http://jsfiddle.net/jtbowden/7cajW/

<强>更好：

我使用基于jquery.highlight的低级代码编写了更好的解决方案。

http://jsfiddle.net/jtbowden/jRebk/3/

它为.rebus(wordMap, [caseSensitive], [useWordBoundaries])添加了一个函数原型，对于后两者，默认值分别为false和true。

用法：

var myRebus = {
    "shoe": "http://i54.tinypic.com/254zjgy.png",
    "hat" : "http://i55.tinypic.com/11iicgg.png",
    "dog" : "http://i55.tinypic.com/287p11k.png",
};

$('body').rebus(myRebus);

Answer 2

一种选择是研究自定义此文本highlighting plug-in。 source code实际上非常简单。看看这一节：

// --- snip ---
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
// --- snip ---

代码创建一个新的span元素，获取匹配的字符串，将其插入新的span，然后用新的span元素替换原始的匹配字符串。

根据您的情况，创建<span>而不是创建<img>。而不是在找到的字符串中添加回来，在您自己的构造的地图中查找相应的图像URL。所以你会有这样的事情：

var rebus = {
  shoe : '/images/shoe.jpg',
  sock : '/images/sock.jpg',
  spats : '/images/spats.jpg'
}

在代码中，在appendChild行之前，你会有这样的事情：

var middleclone = rebus[ middleclone.data.toLowerCase() ];

这一切都来自快速浏览代码，未经测试，但似乎您应该能够删除突出显示的部分并删除一些替换代码。

Answer 3

我不知道这是否可以作为扩展，但我会这样尝试：
http://jsfiddle.net/wSCAx/

var b = document.body;
var t = b.innerHTML;
b.innerHTML = t.replace(/shoe/g,'<img src=""/>');

Answer 4

这种方式对你有效吗？：

$(function(){
    var sHtmlText = $('body').html();
    sHtmlText = sHtmlText.replace(/shoe/g, "<img src='http://.../shoe.png' alt='shoe'>");
    $('body').html(sHtmlText);
})

解释：只需在字符串变量中获取完整的原始html，然后直接应用replace语句并在body标签上再次输入正确的字符串。我认为你不需要拆分和迭代html中的所有可能的单词。

如果您可以在服务器端动态执行此操作，我认为这样做会更好，您可以通过这种方式防止出现某种类型的电影弹出行为！

用jquery替换单词

4 个答案: