Javascript：在Chrome中删除空白字符（但不是Firefox）

为什么在用锚链接替换匹配的关键字文本时，下面的代码会消除其周围的空白？注意，这个错误只发生在Chrome中，而不是firefox中

对于完整上下文，文件位于：

要查看正在运行的代码（尚未找到错误），演示页面位于。将第一段复制/粘贴到富文本编辑器（即：dreamweaver，或打开富文本编辑器的gmail）将揭示问题所在，并将单词聚在一起。将其粘贴到纯文本编辑器中不会导致错误

// Find page text (not in links) -> doxdesk.com
function findPlainTextExceptInLinks(element, substring, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType===1) {
            if (child.tagName.toLowerCase()!=='a')
                findPlainTextExceptInLinks(child, substring, callback);
        } else if (child.nodeType===3) {
            var index= child.data.length;
            while (true) {
                index= child.data.lastIndexOf(substring, index);
                if (index===-1 || limit.indexOf(substring.toLowerCase()) !== -1)
                    break;
                // don't match an alphanumeric char
                var dontMatch =/\w/;
                if(child.nodeValue.charAt(index - 1).match(dontMatch) || child.nodeValue.charAt(index+keyword.length).match(dontMatch))
                    break;
                // alert(child.nodeValue.charAt(index+keyword.length + 1));
                callback.call(window, child, index)
            }
        }
    }
}

// Linkup function, call with various type cases (below)
function linkup(node, index) {

    node.splitText(index+keyword.length);
    var a= document.createElement('a');
    a.href= linkUrl;
    a.appendChild(node.splitText(index));
    node.parentNode.insertBefore(a, node.nextSibling);
    limit.push(keyword.toLowerCase()); // Add the keyword to memory
    urlMemory.push(linkUrl); // Add the url to memory
}

// lower case (already applied)
findPlainTextExceptInLinks(lbp.vrs.holder, keyword, linkup);

---

提前感谢你的帮助。我马上就要启动脚本了，我很高兴向您的帮助表示敬意。

我想为您提供更多帮助，但如果无法测试它，很难猜测，但我想您可以通过在链接周围添加空格字符来绕过它，例如

---

顺便说一句，你的这个功能添加了关于复制的有用链接，这真的很有趣。

这与链接功能无关；即使

processSel（）

调用被注释掉，页面上已经存在的复制链接和

credit

内容也会发生这种情况

这似乎是Chrome富文本复制功能中的一个奇怪错误。

支架中的内容良好；如果在结尾处关闭所选范围的内容并提醒其内部HTML，则空白明显存在。但是任何内联元素（不仅仅是链接！）的前、后和内边缘上的空白都不会在富文本中显示

即使将新文本节点添加到包含链接旁边空格的DOM中，Chrome也会将其吞并。我可以通过插入不间断的空格使其看起来正确：

var links= lbp.vrs.holder.getElementsByTagName('a');
for (var i= links.length; i-->0;) {
    links[i].parentNode.insertBefore(document.createTextNode('\xA0 '), links[i]);
    links[i].parentNode.insertBefore(document.createTextNode(' \xA0), links[i].nextSibling);
}

但这很难看，应该是不必要的，并且不能修复其他内联元素。坏铬

var keyword = links[i].innerHTML.toLowerCase();

依靠
innerHTML
从元素中获取文本是不明智的，因为浏览器可能会转义或不转义其中的字符。最值得注意的是
&
，但无法保证浏览器的
innerHTML
属性将输出哪些字符

由于您似乎已经在使用jQuery，因此可以使用
text（）
来获取内容

var isDomain = new RegExp(document.domain, 'g');
if (isDomain.test(linkUrl)) { ...

这将每秒失败一次，因为
g
​lobal regexp会记住它们以前的状态（
lastIndex
）：当与
test
等方法一起使用时，应该不断重复调用，直到它们不返回匹配为止

这里似乎不需要
g
（多个匹配项）。。。但是这里似乎也不需要regexp，因为一个简单的字符串
indexOf
会更可靠。（在regexp中，域中的每个
都将匹配链接中的任何字符。）

更好的方法是，使用
Location
上的URL分解属性直接比较主机名，而不是在整个URL上进行粗略的字符串匹配：

if (location.hostname===links[i].hostname) { ...

​

如果您想在单词边界上匹配单词，并且不区分大小写，我认为最好使用正则表达式，而不是简单的子字符串匹配。这样还可以节省对每个关键字执行四次调用
findText
。您可以获取中函数的内部位（在
中，如果（child.nodeType==3）{…
），并使用该位代替当前字符串匹配

从字符串生成regexp最烦人的事情是在标点符号中添加大量反斜杠，因此您需要一个函数：

// Backslash-escape string for literal use in a RegExp
//
function RegExp_escape(s) {
    return s.replace(/([/\\^$*+?.()|[\]{}])/g, '\\$1')
};

var keywordre= new RegExp('\\b'+RegExp_escape(keyword)+'\\b', 'gi');

为了提高效率，您甚至可以一次性替换所有关键字：

var keywords= [];
var hrefs= [];
for (var i=0; i<links.length; i++) {
    ...
    var text= $(links[i]).text();
    keywords.push('(\\b'+RegExp_escape(text)+'\\b)');
    hrefs.push[text]= links[i].href;
}
var keywordre= new RegExp(keywords.join('|'), 'gi');

var关键字=[]；
var-hrefs=[]；
对于（var i=0；iThanks chen。您应该可以在我提供的链接上进行测试。请告诉我您遇到了什么问题。Bobince，您是我的英雄：）.你注意到doxdesk的荣誉了吗？在我的项目页面上，你会被赞赏的淋漓尽致！嘿！刚刚注意到我忘了链接另一个包含基于正则表达式的
findText
…修复的答案。“依赖innerHTML从元素中获取文本是不明智的，因为浏览器可能会转义或不转义元素中的字符。最值得注意的是&，但无法保证浏览器的innerHTML属性将输出哪些字符。”我的意思是独立于库。键入获取文本的规范方式（以及
text（）
使用的内容）是从收集文本的元素的子节点对DOM树进行深度优先遍历（即在
child.nodeType==1时递归，并在
child.nodeType==3时添加到字符串）。还有DOM Level 3核心属性
元素.textContent
，但IE或其他较旧的浏览器不支持它。在IE上，您可以分支并使用
元素.innerText
，但这并不完全相同（尤其是空白）。
var keywords= [];
var hrefs= [];
for (var i=0; i<links.length; i++) {
    ...
    var text= $(links[i]).text();
    keywords.push('(\\b'+RegExp_escape(text)+'\\b)');
    hrefs.push[text]= links[i].href;
}
var keywordre= new RegExp(keywords.join('|'), 'gi');