Javascript 替换大字符串中锚定标记的所有实例

如果我有以下资料：

content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened."

---

可以使用Regexp替换所有定位标记

var result = subject.replace(/<a[^>]*>|<\/a>/g, "");

var result=subject.replace（/]*>|/g，”）；

如果您能够以某种方式在javascript中获取字符串（如果不是动态的（比如您将其保存在javascript中名为“replacedString”的变量中），那么为了解决此问题，您可以将整个html内容包含在一个div中，如下所示：-

<div id="stringContent">
  <a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.
</div>

---

这就是为什么上帝发明了正则表达式，

string.replace

方法接受正则表达式作为要替换的字符串

var contentSansAnchors = content.replace(/<\/?a[^>]*>/g, "");

var contentsansansarks=content.replace（/]*>/g，”）；

如果您是regex新手，请给出一些解释：

/

…

/

：搜索字符串不是用引号括起来，而是用正斜杠括起来以反映正则表达式

：这些是文本HTML标记大括号

\/？

：标记可以或不可以（

？

）以正斜杠（

\/

）开头。必须使用反斜杠转义正斜杠，否则正则表达式将在此过早结束

a

：文字锚定标记名称

[^>]*

：在

a

之后，标记可能包含零个或多个（

*

）字符，这些字符不是（

^

）右括号（

）。“除右大括号外的任何内容”表达式都用方括号（

[

..

]

）包装，因为它表示单个字符

g

：这将正则表达式修改为全局表达式，以便替换所有匹配项。否则，将只替换第一个匹配项

---

根据您希望解析的字符串，您可能还需要添加不区分大小写的

i

修饰符。

去除保留文本内容的所有标记：

var content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.";

// parse the HTML string into DOM
var container = document.createElement('div');
container.innerHTML = content;

// retrieve the textContent, or innerText when textContent is not available
var clean = container.textContent || container.innerText;
console.log(clean); //"I was going here and then that happened."

参考文献

• -将指定节点作为当前节点的子节点插入到引用元素之前
• -从DOM中删除子节点
• -返回具有给定标记名的元素列表。将搜索指定元素下的子树，不包括元素本身

---

尽管OP没有使用jQuery，但这里有一个实际上与上述jQuery版本相当的jQuery版本，它可能与之相关：

var content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.";

var clean = $('<div>').append(content).find('a').contents().unwrap().end().end().html();
console.log(clean); //"I was going here and then that happened."

var content=“当时正在这里，然后发生了。”；
var clean=$（“”）.append（content.find（'a'）.contents（）.unwrap（）.end（）.html（）；
控制台日志（干净）//“我本来要去的，后来就发生了。”

---

注 这个答案中的所有解决方案都假设

内容
是有效的HTML——它不会处理格式错误的标记、未关闭的标记等。它还认为标记是安全的（XSS已消毒）

如果不满足上述条件，最好使用正则表达式解决方案。当用例涉及到解析HTML时，正则表达式通常是您的最后手段，因为在针对任意标记（相关：）进行测试时很容易被破坏，但是您的用例看起来非常简单，正则表达式解决方案可能正是您所需要的

此答案提供非正则表达式解决方案，以便您可以在正则表达式解决方案中断时使用这些解决方案。
所需的输出是什么，以及应该删除哪些标记（我假设
标记仅具有
href
属性）？was going“
的任何实例都应该是
“I was going”
在jQuery中回答：（用vanilla JS重写可能不太难）虽然我真的很感激你为我创建了一个示例，但我真的在寻找纯JS解决方案，因为我能够更好地理解它们。是的，我希望你想要一个普通的解决方案，我只写了jQuery一个，因为它更快——在我看来，更容易理解/扫描（一旦你掌握了jQuery）与jQuery提取的嵌套循环和长DOM API名称不同，它不是
Regex
，方法是在
String
原型上，而不是
RegExp
。对于
中包含
（如
class=“foo>条）的
上的任何属性值，这也将失败“
，这是一个有效的
类
值）。似乎您用了错误的语言编写了答案。
=]
正要编写的
Regex
没有sense@Fabrício Matté我已经在C#中输入，现在改为javascript.thx。这可能有点不安全。
var content=“sendAllCookiesToHacker（）破坏一切
谢谢您的参考。是否需要创建div元素？这是因为一旦创建了div并设置了它的文本，.innerText将只显示任何文本，而不显示任何标记？@Ale根据只有锚定标记，但对于一般用例，我会先使用或类似的方法清理字符串。@Ale也一样，如果我重新标记的话。@Ale正确地说，设置
innerHTML
不会运行脚本标记。（与jQuery的
.html（）
不同）但是某些HTML属性可能存在XSS问题，因此我仍然会在一般用例中使用DOM Purify。@DemCodeLines噢，div在那里，因此我可以设置它的
innerHTML
，从而在其中创建文本节点和锚定元素。是的，
。textContent
递归检索所有文本节点，而不带任何元素标记。
var content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.";

// parse the HTML string into DOM
var container = document.createElement('div');
container.innerHTML = content;

// retrieve the textContent, or innerText when textContent is not available
var clean = container.textContent || container.innerText;
console.log(clean); //"I was going here and then that happened."

var content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.";

var container = document.createElement('div');
container.innerHTML = content;

var anchors = container.getElementsByTagName('a'),
    anchor;

while (anchor = anchors[0]) {
    var anchorParent = anchor.parentNode;

    while (anchor.firstChild) {
        anchorParent.insertBefore(anchor.firstChild, anchor);
    }
    anchorParent.removeChild(anchor);
}

var clean = container.innerHTML;
console.log(clean); //"I was going here and then that happened."

var content = "<a href=\"1\">I</a> was going here and then <a href=\"that\">that</a> happened.";

var clean = $('<div>').append(content).find('a').contents().unwrap().end().end().html();
console.log(clean); //"I was going here and then that happened."