将标签添加到标签内的文本

Question

我有以下 html 由第三方自动生成的文档：

<body>
<pre>
<b>Field1</b> something 
<b>Field2</b> something else
...
</pre>
</body>

我想最终突出显示在某些情况下加粗的文本之后的文本，因此我选择使用 greasemonkey。由于该文本没有与之关联的任何 id，我正在考虑重新创建页面，在 </b> 和 <b> 之间，我将用一个标记标签包围所有文本，ID 是文本它前面的字段，像这样：

<body>
<pre>
<b>Field1</b> <mark id=Field1>something </mark>
<b>Field2</b> <mark id=Field2>something else </mark>
...
</pre>
</body>

有没有无需重新创建页面即可实现此目的的简单方法？例如在每个标签后插入元素？

Answer 1

如果您在该特定页面上没有任何其他粗体元素，并且假设您使用的是文本编辑器，则可以执行 "Replace"（Sublime Text 和 VS 中的 Ctrl + h）搜索，在替换部分放回结束标记并添加附加编辑“<"Element, DIV, Class, ID etc>"，然后单击全部替换。

Answer 2

使用纯 JS，您可以 select 所有 b 节点，对其进行循环，并在每次迭代中，将同级文本节点替换为新的 mark 节点。

检查下面的工作示例：

document.querySelectorAll('b').forEach(b => {
  let textNode = b.nextSibling;
  let newNode = document.createElement('mark');
  newNode.id = b.innerText;
  newNode.innerHTML = textNode.textContent;
  textNode.replaceWith(newNode);
})

<pre>
<b>Field1</b> something 
<b>Field2</b> something else
</pre>

将标签添加到标签内的文本

adding tags to text inside a tag

html

javascript

greasemonkey