如何将标记转换为另一个标记

Question

我有以下字符串<h2>Test</h2><p>test</p>。我想替换字符串并用标记替换标记。例如，字符串应该变成<h3>Test</h3><p>test</p>。如何在javascript中做到这一点？

Answer 1

您可以使用一个简单的正则表达式来替换它：

const str = "<h2>Test</h2><p>test</p>";
str.replace(/<(/?)h2>/g, "<$1h3>") // <h3>Test</h3><p>test</p>

Answer 2

最简单的方法就是使用正则表达式/regex

https://regex101.com/r/h3oqia/1

const regex = /<h2>(.*)</h2>/g;
// You can replace this with any tag, just the h2 for example.
let str = "<h2>Test</h2><p>test</p>";
console.log(str);
str = str.replace(regex, "<h3>$1</h3>");
console.log(str);

这个解决方案并不完全适用于嵌套标签，但它适用于给定的示例。如果我们必须做嵌套标签，这将花费更长的时间，也会更加复杂。

Answer 3

使用DOM:

var temp = document.createElement('div');
temp.innerHTML = '<h2>Test</h2><p>test</p>';
var hOld = temp.getElementsByTagName('h2')[0];
var hNew = document.createElement('h3');
Array.from(hOld.childNodes).forEach(function(child) {
hNew.appendChild(child);
});
temp.replaceChild(hNew, hOld);
alert(temp.innerHTML);

Answer 4

我相信这就是您想要做的：

var str = "<h2>Test</h2><p>test</p>";
var str = str.replace(/d+/g, function(number) {
return Number(number) + 1;
});
console.log(str)

解释：

var str = str.replace(/d+/g, function(number) {
return Number(number) + 1;
});

这将贯穿字符串，将每个整数分配给变量number，并将其替换为后面的数字

要了解更多关于上面使用的Javascript.replace方法的信息，请访问：

https://www.w3schools.com/jsref/jsref_replace.asp

要了解有关上述RegExpg修饰符的更多信息，请访问：

https://www.w3schools.com/jsref/jsref_regexp_g.asp

Answer 5

这里有一个类似于Marat的方法，但使用DOMParser而不是主文档。此函数还将循环覆盖原始节点上的属性，并将它们放入新节点中。事件侦听器之类的东西无法通过此方法工作，但无论如何都不能将它们添加到字符串中。

这是一种更可重用的方法，可以根据需要处理复杂的html字符串，因此，即使regex方法看起来更简单，使用DOM解析器也比使用regex要好得多。

const str = '<h2>Test</h2><p>test</p>';
function replaceBySelector(str, selector, newTag, single = false) {
const domparser = new DOMParser();
const doc = domparser.parseFromString(str, 'text/html');
const elements = single ? [doc.querySelector(selector)] : doc.querySelectorAll(selector);
for (const element of elements) {
const replacement = doc.createElement(newTag);
for (const attribute of element.attributes) {
replacement.setAttribute(attribute.nodeName, attribute.nodeValue);
}
replacement.innerHTML = element.innerHTML;
element.parentNode.replaceChild(replacement, element)
}
return doc.body.innerHTML;
}
console.log(replaceBySelector(str, 'h2', 'h3'));
console.log(replaceBySelector(str, 'p', 'a'));