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

如何解决用新标签替换带有innerHTML的标签以设置为id

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

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

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

解决方法

这似乎更像是 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);

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

2021-06-07T17:42:28.929+0200 [DEBUG] [org.gradle.internal.operations.DefaultBuildOperationRunner] Completing Build operation 'Snapshot outputs after executing task ':app:processDebugMainManifest''
2021-06-07T17:42:28.518+0200 [LIFECYCLE] [class org.gradle.internal.buildevents.TaskExecutionLogger] 
Execution failed for task ':app:mergeDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.res.ResourceCompilerRunnable
> Resource compilation failed. Check logs for details.

* Try:
Run with --stacktrace option to get the stack trace.  Run with --scan to get full insights.

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

需要指出的是，当您需要访问/修改 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