javascript regex取锚文字和网址，从锚标签

StackOverflow https://stackoverflow.com/questions/369147

  •  21-08-2019
  •  | 
  •  

题

我有一段文字在javascript变被称为'input_content'和，文本中包含多个锚标签/链接。我想到匹配的所有定位标记和取锚文字和网址，并把它变成一个阵列如(或类似于)：

Array
(
    [0] => Array
        (
            [0] => <a href="http://yahoo.com">Yahoo</a>
            [1] => http://yahoo.com
            [2] => Yahoo
        )
    [1] => Array
        (
            [0] => <a href="http://google.com">Google</a>
            [1] => http://google.com
            [2] => Google
        )
)

我已经采取了一个裂缝它(http://pastie.org/339755)，但我难超越这一点。谢谢你的帮助！

有帮助吗？

解决方案 

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4))
});

这假设您的锚点始终采用以下形式 <a href="...">...</a> IE。如果有任何其他属性（例如， target）。可以改进正则表达式以适应这一点。

分解正则表达式：

/ -> start regular expression
  [^<]* -> skip all characters until the first <
  ( -> start capturing first token
    <a href=" -> capture first bit of anchor
    ( -> start capturing second token
        [^"]+ -> capture all characters until a "
    ) -> end capturing second token
    "> -> capture more of the anchor
    ( -> start capturing third token
        [^<]+ -> capture all characters until a <
    ) -> end capturing third token
    <\/a> -> capture last bit of anchor
  ) -> end capturing first token
/g -> end regular expression, add global flag to match all anchors in string

每次调用我们的匿名函数都会收到三个标记作为第二个、第三个和第四个参数，即arguments[1]、arguments[2]、arguments[3]：

  • argument[1] 是整个锚点
  • argument[2] 是 href 部分
  • argument[3] 是里面的文本

我们将使用 hack 将这三个参数作为新数组推送到我们的 main 中 matches 大批。这 arguments 内置变量不是真正的 JavaScript 数组，因此我们必须应用 split 其上的数组方法来提取我们想要的项目：

Array.prototype.slice.call(arguments, 1, 4)

这将从中提取项目 arguments 从索引 1 开始，到索引 4 结束（不包括）。

var input_content = "blah \
    <a href=\"http://yahoo.com\">Yahoo</a> \
    blah \
    <a href=\"http://google.com\">Google</a> \
    blah";

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4));
});

alert(matches.join("\n"));

给出：

<a href="http://yahoo.com">Yahoo</a>,http://yahoo.com,Yahoo
<a href="http://google.com">Google</a>,http://google.com,Google

其他提示

既然你大概在Web浏览器中运行的JavaScript，正则表达式似乎是这样一个坏主意。如果段落在首位的网页来了，得到一个句柄容器，请致电.getElementsByTagName()获得锚，然后提取值你想要的方式。

如果这是不可能的，那么创建一个新的HTML元素对象，分配你的文字，它的.innerHTML属性，然后调用.getElementsByTagName()。

我认为乔尔有它的右边 - 正则表达式是臭名昭著的使用标记打不好，因为有太多的可能性来考虑。是否有其他属性的锚标记？什么样的顺序是他们？是分离的空白总是一个单一的空间？看到你已经有一个浏览器的HTML 解析器可用，最好把那个去上班。

function getLinks(html) {
    var container = document.createElement("p");
    container.innerHTML = html;

    var anchors = container.getElementsByTagName("a");
    var list = [];

    for (var i = 0; i < anchors.length; i++) {
        var href = anchors[i].href;
        var text = anchors[i].textContent;

        if (text === undefined) text = anchors[i].innerText;

        list.push(['<a href="' + href + '">' + text + '</a>', href, text];
    }

    return list;
}

这将返回像你描述不管链接是如何存储在一个阵列。请注意，你可以改变功能，通过改变参数名称为“容器”，并删除第两行与传递元件的作用，文本，而不是。该的textContent / innerText属性获取（粗体/斜体/ FONT / ...）的链接显示的文本，去掉任何标记。你可以用.innerHTML取代.textContent，如果你想保留的标记去掉内if（）语句。

我觉得 JQuery的将是你最好的选择。这是不是最好的剧本，我相信其他人可以给出更好的东西。但是，这创造了你在寻找什么的数组。

<script type="text/javascript">
    // From http://brandonaaron.net Thanks!
    jQuery.fn.outerHTML = function() {
        return $('<div>').append( this.eq(0).clone() ).html();
    };    

    var items = new Array();
    var i = 0;

    $(document).ready(function(){
        $("a").each(function(){
            items[i] = {el:$(this).outerHTML(),href:this.href,text:this.text};
            i++;      
        });
    });

    function showItems(){
        alert(items);
    }

</script>

要提取的网址：

变种图案= /.href="(.)".*/; VAR URL =与string.replace（图案， '$ 1'）;

演示：

//var string = '<a id="btn" target="_blank" class="button" href="https://yourdomainame.com:4089?param=751&amp;2ndparam=2345">Buy Now</a>;'
//uncomment the above as an example of link.outerHTML

var string = link.outerHTML
var pattern = /.*href="(.*)".*/;
var href = string.replace(pattern,'$1');
alert(href)

有关“锚文本”，为什么不使用： link.innerHtml

受益的搜索者:我创造的东西，将工作与其他属性在锚标签。对于那些不熟悉Regex，美元(1美元等等)的数值是regex组匹配。

var text = 'This is my <a target="_blank" href="www.google.co.uk">link</a> Text';
var urlPattern = /([^+>]*)[^<]*(<a [^>]*(href="([^>^\"]*)")[^>]*>)([^<]+)(<\/a>)/gi;
var output = text.replace(urlPattern, "$1___$2___$3___$4___$5___$6");
alert(output);

看到工作 jsFiddle 和 regex101.

或者，可以获取信息的团体这样的：

var returnText = text.replace(urlPattern, function(fullText, beforeLink, anchorContent, href, lnkUrl, linkText, endAnchor){
                    return "The bits you want e.g. linkText";
                });
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top