从锚标签中提取锚文本的 JavaScript

Question

需要帮助如下内容。

在 Javascript 中，需要传递一个输入参数。

例如：

str="<a href=www.google.com>Google</a>"; // this is for example actual input vary
// str is passed as parameter for javascript function

输出应该是“Google”。

我在Java中使用正则表达式，它运行良好。

String regex = "< a [ ^ > ] * > ( . * ? ) < / a > ";
Pattern p = Pattern.compile(regex, Pattern.DOTALL | Pattern.CASE_INSENSITIVE);

但在JavaScript中它不起作用。

我该如何在JavaScript中实现此功能。有人可以为我提供JavaScript实现的帮助吗。

- Manushi

---

你能展示一下你的代码吗？如果没有看到你的脚本和HTML，很难理解你想要做什么。 - Evan Davis

你是否在寻找类似于这样的内容：anchor.getAttribute("href") - Rahul Tripathi

你能提供一些其他的例子，以确保正则表达式匹配所有这些例子吗？所有变量都叫“str”吗？所有链接格式都完全相同吗？ - Jeff Escalante

这似乎是一个Java问题。 - Sorter

我已经更新了我的问题。希望这能更清楚地解释我的疑问。 - Manushi

为什么你一开始就有一个HTML字符串？ - user2736012

Answer 1

我不认为您想使用正则表达式来解决这个问题。您可以尝试像这样简单地处理：

<a id="myLink" href="http://www.google.com">Google</a>

    var anchor = document.getElementById("myLink");

    alert(anchor.getAttribute("href")); // Extract link

    alert(anchor.innerHTML); // Extract Text

示例演示

编辑：- (正如Patrick Evans所评论的那样)

var str = "<a href=www.google.com>Google</a>";
var str1 = document.createElement('str1');
str1.innerHTML = str;
alert(str1.textContent);
alert( str1.innerText);

Sample DEMO

- Rahul Tripathi

---

如果可能的话，这是比正则表达式更好的方法。 - Jeff Escalante

这只能工作因为元素已经在文档中，OP要求从字符串中获取信息。 - Patrick Evans

大家好，我目前正在尝试你们提到的方法。感谢大家对此提供指导。我会尽快更新哪种方法适用于我。 - Manushi

Answer 2

根据您提供的建议，我得到了答案并对此进行了实践，对我很有帮助。

function extractText(){
var anchText = "<a href=www.google.com>Google</a>";
    var str1 = document.createElement('str1');      
    str1.innerHTML = anchText;
    alert("hi "+str1.innerText);
    return anc;
}

感谢大家的支持。

- Manushi

---

太棒了，请确保将其标记为正确答案，如果您想友好一些，请给每个帮助过您的人点赞！ - Jeff Escalante

Answer 3

将HTML字符串插入元素中，然后只获取文本？

var str = "<a href=www.google.com>Google</a>";
var div = document.createElement('div');

div.innerHTML = str;
var txt = div.textContent ? div.textContent : div.innerText;

FIDDLE

在jQuery中，这将是：

var str = "<a href=www.google.com>Google</a>";
var txt = $(str).text();

FIDDLE

- adeneo

Answer 4

我先尝试着回答一下，如果你在问题中添加更多的测试用例或细节，我可以更新回答：

\w+="<.*>(.*)</.*>"

这与您提供的示例相匹配，而且以下情况都不重要：

• 变量名不同
• 用于包装文本的标签或标签内容不同

具体会导致出现问题的是如果在HTML标记内部有尖括号，这是可能的。

注意：最好使用html来完成此操作，因为其他答案已经尝试过。我只是用正则表达式回答了这个问题，因为这是OP要求的。如果您可以不使用正则表达式就能完成这个操作，那么请这样做。当有可能时，请勿尝试使用javascript解析HTML，此正则表达式无法与完整的HTML解析器相比较。

- Jeff Escalante

---

"<a target="_blank" href=<<java class name>>?docId=" + docId + "&cId=" + cId +">" + dName +"</a>"这段代码涉及动态数据docId、cId和dName，这些数据会被附加到URL中。该URL将作为href传递。锚点标签作为此问题的输入进行传递。我需要以输出的形式获取'dName'。dName是动态值，例如Tom、Scot、Mary等。 - Manushi

好的，这个正则表达式应该可以正常工作。唯一可能会导致它失效的是如果你在 HTML 标签内部有尖括号，但你本来就不应该有这种情况。 - Jeff Escalante

请看看现在你是否能够理解。 - Manushi

如果你能生成一组用于测试的字符串，通常可以帮助解决正则表达式问题。这样，我就可以确保理解所有变化，并确保正则表达式在许多不同情况下返回正确的结果。这个特定的正则表达式要求非常宽松，如早些时候所述，应该处理除 HTML 标记内部的尖括号以外的所有内容。 - Jeff Escalante

Answer 5

不需要使用正则表达式，只需使用DOMParser解析字符串并获取元素，然后使用DOM对象的方法/属性即可。

var parser = new DOMParser();
var str='<a href='www.google.com'>Google</a>"; 
var dom = parser.parseFromString(str,"text/xml");

//From there use dom like you would use document
var atags = dom.getElementsByTagName("a");
console.log( atags[0].textContent );

//Or
var atag = dom.querySelector("a");
console.log( atag.textContent );

//Or
var atag = dom.childNodes[0];
console.log( atag.textContent );

唯一的问题是DOMParser在低于IE 9的浏览器中不受支持。

- Patrick Evans

Answer 6

如果你正在使用JQuery，这应该是一个简单的任务。

我只需要创建一个不可见的div，并在其上呈现此锚点（<a>）。之后，您可以简单地选择该锚点并获取其内部文本。

$('body').append('<div id="invisibleDiv" style="display:none;"></div>'); //create a new invisible div
$('#invisibleDiv').html(str); //Include yours "str" content on the invisible DIV
console.log($('a', '#invisibleDiv').html()); //And this should output the text of any anchor inside that invisible DIV.

请记住，要按照这种方式操作，您必须在页面上加载JQuery。

编辑：仅在项目中已经有JQuery的情况下使用，因为如下所述，像这样简单的事情不应该成为包含整个库的原因。

- Marcelo Myara

---

-1 像这样的小事情并不需要在您的代码中添加整个jQuery库。对于非常少量的好处来说，这是很大的开销... - War10ck

我必须只使用 JavaScript。我考虑使用正则表达式提取锚文本。但是还有其他方法吗？由于这是由其他人开发的代码，我有许多限制。我不知道他/她是谁。这就是为什么。 - Manushi

@War10ck，就像我之前所说的“如果你正在使用JQuery”，我并不建议任何人仅为此目的而包含JQuery，但是由于今天的Web应用程序通常依赖于JQuery进行许多操作，因此我提供了一种JQuery替代语法，以补充那些纯JavaScript的答案。 - Marcelo Myara

Answer 7

假设您正在使用Java，从提供的代码中。

我建议您使用JSoup来提取锚标记内的文本。
以下是原因。为什么不使用正则表达式解析HTML？

String html = "<a href='www.google.com'>Google</a>";
Document doc = Jsoup.parse(html);
Element link = doc.select("a").first();

String linkHref = link.attr("href"); // "www.google.com"
String linkText = link.text(); // "Google""

String linkOuterH = link.outerHtml(); 
// "<a href='www.google.com'>Google</a>";
String linkInnerH = link.html(); // "<b>example</b>"

- Sorter

---

-1 OP 要求的是 JavaScript 解决方案，而不是 Java 解决方案。这是两个完全不同的东西... - War10ck

我该如何在Javascript中实现这个功能。 - user2736012

在这种情况下，我会选择Rahul Tripathi的答案。把它作为一个备选方案。 - Sorter

感谢在 JavaScript 中没有给予帮助。 - numerical25