用带有 innerHTML 的新标签替换标签以设置为 id答案

【问题标题】：Replace tags with new tags with innerHTML to set to id用带有 innerHTML 的新标签替换标签以设置为 id
【发布时间】：2021-06-07 15:35:42
【问题描述】：

我有以下文字：

Send to <a class="tipo9" id="1">Example Mark</a> and <a class="tipo0" id="3">Testing James</a> a new Document

并想获取以下代码：

Send to <per>1</per> and <per>3</per> a new Document

标签之间的数字是id号。

我找到了一个非常复杂的解决方案，例如：

function convert(f) {
    var str=f;
    str=str.replaceAll('<a class="', '[per]');
    str=str.replaceAll('/a>', '[/per]');
    str=str.replaceAll(/tipo\d/g, '');
    str=str.replaceAll(/['"]+/g, '');
    str=str.replaceAll('"', '');
    str=str.replaceAll(' id=', '');
    str=str.replaceAll(/\s*\>.*?\<\s*/g, "")
    str=str.replaceAll('[per]', '<per>');
    str=str.replaceAll('[/per]', '</per>');
    str=str.trim();
    document.getElementById('testoHTML').value=str;
}

但它会带来不同的问题。我知道它应该存在另一种使用正则表达式的解决方案，但我无法获得有效的结果。

希望能找到一些好的解决方案:)

【问题讨论】：

为什么不把 HTML 放到一个文档片段中，用 DOM 代替字符串替换呢？
Java 和这个有什么关系？
选择元素并使用replaceWith

标签： javascript regex replaceall

【解决方案1】：

这似乎更像是DOMParser 的工作：

var parsed = new DOMParser().parseFromString('Send to <a class="tipo9" id="1">Example Mark</a> and <a class="tipo0" id="3">Testing James</a> a new Document', "text/html");
parsed.querySelectorAll("a").forEach(e=>{
  n = document.createElement("pre");
  n.innerHTML  = e.id;
  e.replaceWith(n);
})
var result = parsed.body.innerHTML;
console.log(result);

【讨论】：

【解决方案2】：

不清楚为什么在为它构建 DOM 方法时要使用正则表达式来更新 HTML。

const elems = document.querySelectorAll(".foo > a");
elems.forEach(elem => {
  const updateElem = document.createElement("p");
  updateElem.textContent = elem.id;
  elem.replaceWith(updateElem);
});

&lt;div class="foo"&gt;Send to &lt;a class="tipo9" id="1"&gt;Example Mark&lt;/a&gt; and &lt;a class="tipo0" id="3"&gt;Testing James&lt;/a&gt; a new Document&lt;/div&gt;

【讨论】：

输入的 HTML 是一个字符串。您可以将这种转换添加到答案中吗？

【解决方案3】：

需要指出的是，当您需要访问/修改 HTML 或 XML 时，不建议使用正则表达式。更多关于： RegEx match open tags except XHTML self-contained tags

也就是说，可以使用正则表达式来达到该结果，如下所示：

find:
<a.+?id="([^"])+".+?/a>

re:
<per>\1</per>

解释：

找到一个'
消耗所有字母直到找到'id="'，然后消耗'id="'

选择所有内容，直到找到 '"'，将 id 的数量保存为第一组

使用 '"' 和所有的收尾 '/a>'

最后，由于从打开 '' 的所有内容都被选中，它将全部替换为 '\1'，其中 \1 是第一组的内容

我只是写了普通的正则表达式，因为你要求一个正则表达式解决方案。但是处理这个任务的正确方法是使用 DOM

【讨论】：