查找和替换用户通过网站更改超链接的脚本

Question

我有一个网页上的超链接列表，我希望允许用户执行查找和替换命令，该命令将立即更改所有超链接并生成一个自定义列表，他们可以复制并粘贴到其他地方。

例子：

google.com/search?q=search+phrase&pws=0

google.com/search?tbm=blg&q=search+phrase&pws=0

对于以上两个 URL（假设它们是超链接的），用户可以执行查找和替换，找到“search+phrase”并将其替换为“custom+search+new”以呈现以下新的超链接 URL：

google.com/search?q=custom+search+new&pws=0

google.com/search?tbm=blg&q=custom+search+new&pws=0

它可以是http://htmlsandbox.com 和http://textmechanic.co/Find-and-Replace-Text.html 的组合

Answer 1

您可以使用正则表达式和 JavaScript 或 Jquery。

由于您没有标记Javascript 或JQuery，因此这里是一个使用jQuery 的示例（认为它可以很容易地替换为Javascript）。

function replaceCustomSearch (custom) {
    var patt = /q=[\w\d\+]+/;
    $('a[href]').each(function(){
        var $this = $(this),
            href = $this.attr('href');
        if (patt.test(href)) {
            href = href.replace(patt.exec(href), "q=" + custom);
            $this.attr('href', href);
        }
    });
}

小提琴：http://jsfiddle.net/UP8x5/

Answer 2

您的问题并不清楚这是用于何处。正如您所说的必须在客户端进行更改（并且不要在服务器端提及任何内容），仅使用客户端编程语言来执行此操作是有意义的。在浏览器中，javascript 将是一个合乎逻辑的解决方案。当您要做更复杂的事情时，您可能想要查看诸如jQuery 之类的库。现在我将用纯 javascript 提供这两种解决方案，因为这太简单了，无法加载完整的库。

替换文本字段中的文本

如果您正在制作类似编辑器的东西，您可能会在文本字段中查找和替换某些内容。

function doReplace() {
  var s = document.getElementById('search').value;
  var r = document.getElementById('replace').value;

  var oldtext = document.getElementById('mytext').innerHTML;
  var newtext = oldtext.replace( s, r );

  document.getElementById('mytext').innerHTML = newtext;
}

这在字符串上使用replace-method。 This 是个小问题。

替换实际链接中的文字

var $a = document.getElementsByTagName('a');
var search = "asdf";
var replace = "qwer";

for( var i = 0; i < $a.length; i++ ) {
    $a[i].href = $a[i].href.replace( '/' + search + '/g', replace );
}

工作小提琴here。它使用正则表达式和getElementsByTagName。