如何使用 jquery 从链接中选择 href 属性？

Question

我有一个这样的字符串：

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">...www.example.com/clas</a> </span> anything';

我想要这个输出：

var newstr: 'anything http://www.example.com/classname/methodname/arg1/arg2 anything';

我该怎么做？实际上，我几乎可以使用多个str_replace() 来做到这一点。但我想知道如何使用正则表达式来做到这一点？

str.str_replace('<span><a href="', '');
str.str_replace('" target="_blank">', '');
str.str_replace('</a> </span> ', '');

// output:
anything http://www.example.com/classname/methodname/arg1/arg2...www.example.com/clas anything

嗯，如您所见，我无法在输出中删除 ...www.example.com/clas。

注意：示例中的anything 可以是任何单词/句子。顺便说一句，实际上有波斯字符。

---

Edit1：这是一个例子：

我想替换这个：

This <span><a href="www.example.com/classname/methodname/arg1/arg2/" target = "_blank"> ... www.example.com/clas</a> </span> is very good.

有了这个：

This www.example.com/classname/methodname/arg1/arg2/ is very good.

---

Edit2：我还需要该链接的值。像这样的模式：

[LinkName](LinkAddress)

注意：如果该链接的值不是“无标题”，我只想创建上述模式。

示例 1：

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">website name</a> </span> anything';

我想要这个：

var newstr: 'anything [website name](http://www.example.com/classname/methodname/arg1/arg2 anything)';

示例 2：

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">untitled</a> </span> anything';

我想要这个：

var newstr: 'anything http://www.example.com/classname/methodname/arg1/arg2 anything';

Answer 1

您可以将str 包裹在DOM 元素中，找到任何锚标记，将其替换为自己的href 属性，然后返回新字符串：

var newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
  return $(this).attr('href'); // this.href would give absolute path
}).end().text();

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">...www.example.com/clas</a> </span> anything';

var newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
  return $(this).attr('href');
}).end().text();
console.log(newStr);
$('body').append(newStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

如果您的文本总是变化，您应该坚持使用 Gen4tiks 的答案。 但是，如果您的句子规则始终与您在上面描述的方式相同，您可以使用here 解释的 regex.split 方法并定义一个适合您需要的正则表达式。以下是一个有效但非常愚蠢的正则表达式，可以满足您的需求，但对于任何其他用例都非常无用。我只是用它来解释如何使用正则表达式：

var split = str.split(split(/(<\/*[a-zA-Z0-9=\\]+>)|(href=")|(target)/)
//split: ["anything interesting ", "<span>", undefined, undefined, "<a ", undefined, "href="", undefined, "http://www.example.com/classname/methodname/arg1/arg2" ", undefined, undefined, "target", "="_blank">...www.example.com/clas", "</a>", undefined, undefined, " ", "</span>", undefined, undefined, " anything else"]
var output = match[0] + match[(match.indexOf('href="')+2)] + match[match.length-1]
//output: "anything interesting http://www.example.com/classname/methodname/arg1/arg2"  anything else"

• / 定义正则表达式的开始和结束
• | 定义了何时进行拆分的不同选项
• <\/*[a-zA-Z0-9=\\]+> 为每个 html 标记拆分
• (href=") 用于稍后查找正确的索引（用于您要显示的链接）
• target 在您的 html 的“目标”属性的位置拆分字符串（您不想在输出中包含它）

希望有帮助！