用于从锚标签中提取锚文本的 Javascript

Javascript for extracting anchor text from anchor tag

本文关键字:文本 提取 Javascript 标签 用于      更新时间:2023-09-26

需要以下帮助。

在javascript中,需要传递一个输入

例如:

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

输出应检索为"谷歌"。

我在 java 中有正则表达式,它在里面工作正常。

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

但是在JavaScript中它不起作用。

我如何在Javascript中做到这一点。任何人都可以为我的JavaScript实现提供帮助。

我认为您不想为此使用正则表达式。您可以简单地尝试这样做:-

<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

示例演示

编辑:-(正如帕特里克·埃文斯正确评论的那样)

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

示例演示

将 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;

小提琴

在jQuery中,这将是:

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

小提琴

从你们给出的建议中,我得到了答案并为我工作

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;
}

感谢大家的支持

只是要对此进行初步尝试,我可以更新这是您在问题中添加更多测试用例或详细信息:

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

这与您提供的示例相匹配,此外,如果出现以下情况并不重要:

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

具体来说,破坏这一点的是,如果您的 html 标签中有尖括号,这是可能的。

注意:像其他答案一样使用 html 执行此操作是一个更好的主意,我只用正则表达式回答这个问题,因为这是 OP 所要求的。对于 OP,如果您可以在没有正则表达式的情况下执行此操作,请改为执行此操作。如果可能的话,你不应该尝试用javascript解析HTML,这个正则表达式不能与完整的html解析器相提并论。

不需要正则表达式,只需使用 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 在低于 9 的 IE 中不受支持。

好吧

,如果你正在使用JQuery,这应该是一件容易的事。

我只会创建一个不可见的div 并在其上渲染这个锚点 ()。之后,您可以简单地选择锚点并获取其内部文本。

$('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时才使用,因为如下所述,像这样简单的事情不应该成为包含整个库的原因。

假设您使用的是 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>"