JavaScript 替换不在 URL 中的单词答案

【问题标题】：JavaScript replace words which aren't in a URLJavaScript 替换不在 URL 中的单词
【发布时间】：2016-11-08 14:23:44
【问题描述】：

我正在运行一个 JavaScript 来替换浏览器文本内容中的某些单词。

但是我不希望它替换 url 中的单词。

更新：

例如，如果我将X 替换为Y，并且我在搜索引擎中搜索X，则其中带有X 的任何网址链接都将替换为Y - 我不能点击它们，因为它们不存在（和/或它们不正确）。

document.body.innerHTML = document.body.innerHTML.replace(/word/gi, "newword");

我该怎么做？

【问题讨论】：

“网址中的单词”是什么意思？还有你说的“他们坏了”是什么意思？你能把你的问题编辑得更具体吗？
好吧，您不能使用文档的整个 innerHTML，您需要逐个元素地替换文本。另外，当单词中有标记时，您的目标将失败。 <em>w</em>ord 将失败。
替换浏览器中的某些单词 - 您无法替换浏览器中的单词。它可以替换文本内容中的单词。显示您当前的内容和预期结果
将“resign”替换为“fed to the lions” - 但如果网址中包含“resign”一词，则它不起作用。
如果是 url，您想如何检测？ URL 可以是 f.e. google.com，这将非常广泛，可以匹配所有类型的 URL。

标签： javascript html url replace

【解决方案1】：

这是一个简单的解决方案：
1、将url中的所有“word”替换为“tempuniqueflag”（注意word不是tempuniqueflag的子串）

var urls = document.querySelectorAll('a');
for (url in urls) {
  if (typeof urls[url].href === "string") 
    urls[url].href = urls[url].href.replace(/word/,"tempuniqueflag");
}

照常替换您的文本内容
document.body.innerHTML = document.body.innerHTML.replace(/word/gi, "newword");
带回网址中的原词
for (url in urls) { if (typeof urls[url].href === "string") urls[url].href = urls[url].href.replace(/tempuniqueflag/,"word"); }

【讨论】：

这行不通...您将如何匹配所有网址？没有写，那个url在<a href="...">... url也可以在其他标签中作为纯文本，比如<p>...</p>里面。
是的，这是真的，但我认为您需要所有可点击的链接，考虑到以下陈述：
“我无法点击它们，因为它们不存在”。
如果您指出的情况也需要考虑，则必须修改解决方案。它只是在玩正则表达式。

【解决方案2】：

这真的很难做到（我的意思是，它太宽泛了），但我建议你通过以下几个步骤来做到这一点：

首先你应该匹配所有的 url 并将它们存储在某个数组中（例如var urls = [];）
然后用一些独特的字符序列替换所有网址，这些字符序列在您的浏览器内容中不确定（例如~~~~~）
然后做你的经典替换，比如document.body.innerHTML = document.body.innerHTML.replace(/word/gi, "newword");
最后在新替换的浏览器内容中匹配所有特殊字符序列 (~~~~~)，并以相同的顺序将它们替换为存储在数组中的 url (urls)。

匹配的网址：

关于匹配 url，您需要一个匹配 url 的良好正则表达式。这很难做到。见here、here和here：

...几乎任何东西都是有效的 URL。那里是一些标点符号规则把它分开。没有任何标点符号，你仍然有一个有效的网址。

仔细检查 RFC，看看你是否可以构造一个“无效”的 URL。这规则非常灵活。

例如，::::: 是一个有效的 URL。路径是":::::"。一个漂亮愚蠢的文件名，但是一个有效的文件名。

另外，///// 是一个有效的 URL。这 netloc（“主机名”）是""。路径是"///"。再次，愚蠢。还有效的。此 URL 规范化为 "///" 这是等价的。

类似"bad://///worse/////" 是完全有效的。愚蠢但有效。

无论如何，这个答案并不是为了给你最好的正则表达式，而是证明如何使用 JavaScript 将字符串包装在文本中。

好的，让我们使用这个：/(https?:\/\/[^\s]+)/g

同样，这是一个糟糕的正则表达式。它会有很多误报。但是对于这个例子来说已经足够了。

function urlify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    })
    // or alternatively
    // return text.replace(urlRegex, '<a href="$1">$1</a>')
}

var text = "Find me at http://www.example.com and also at http://stackoverflow.com";
var html = urlify(text);

// html now looks like:
// "Find me at <a href="http://www.example.com">http://www.example.com</a> and also at <a href="http://stackoverflow.com">http://stackoverflow.com</a>"

总之试试：

$$('#pad dl dd').each(function(element) {
    element.innerHTML = urlify(element.innerHTML);
});

我希望它至少对你有一点帮助。

【讨论】：