从段落中删除锚标记，但使用 Javascript 保留文本

Question

我正在以这种形式从后端 api 获取文本：

const serverText = "This is a <a href="http://www.link1">link</a> and so is <a href="http://www.link1">this</a>. This is also another <a href="http://www.link2">boring link</a>.";

我想把它变成这种形式：

const formatted = "This is a link and so is this. This is also another boring link.";

我用正则表达式解决了这个问题，但我不确定这是否是可行的方法，因为它只是输出一组找到的单词。

在不使用任何额外的 DOM 工具的情况下，有没有更简单的方法来使用 vanilla Javascript 来做到这一点？

Answer 1

尝试这个：

var yourHtml= `This is a <a href="http://www.link1">link</a> and so is <a href="http://www.link1">this</a>. This is also another <a href="http://www.link2">boring link</a>.`;

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(yourHtml, 'text/html');

var text = htmlDoc.body.innerText;

console.log(text); // Returns: "This is a link and so is this. This is also another boring link."

这会将您的 HTML 字符串转换为 DOM，并使用.innerText从您的字符串中删除所有 html 元素 - 只留下文本。

更新：

创建了这个返回文本的简单函数，并且只需要 HTML 字符串：

function textFromHTML(str) {
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(str, 'text/html');
    return htmlDoc.body.innerText;
}

/* --- Usage --- */

var yourHtml= `This is a <a href="http://www.link1">link</a> and so is <a href="http://www.link1">this</a>. This is also another <a href="http://www.link2">boring link</a>.`;
var text = textFromHTML(yourHtml);

console.log(text); // Returns text

更新 2（正则表达式）：

最终版本，但使用 RegExp 而不是DOMParser() ：

function textFromHTML(str) {
    return str.replace(new RegExp("<.*?>", "g"), "");
}

/* --- Usage --- */

var text = textFromHTML("Hello <span>World!</span> This string is HTML!");

console.log(text); // Returns: "Hello World! This string is HTML!"