如何将"</>"实现到 HTML 字符串中？

Question

我需要写一个Javascript或(最好)Typescript函数，它接受一个主要是HTML的字符串，对它做一些事情，并返回有效的HTML。我有个想法:"&;"将被替换为正确的结束标记，例如:

<button>I'm a button</> I'm text!

将:

<button>I'm a button</button> I'm text!

和属性&"嵌套";& lt;/;出现了。我试过的:

const parse = (html: string): string => {
// regex to match </> tags
const regex = /</>/g;
// stack to keep track of open tags
const stack: string[] = [];

// use a parser to parse the HTML and fill the stack with open tags
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");

// loop through all nodes and fill the stack with open tag names
const nodes = doc.documentElement.childNodes;
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];

if (node.nodeType === Node.ELEMENT_NODE) {
// add the tag name to the stack
stack.push((node as Element).tagName.toLowerCase());        
}
}

// replace </> with corresponding closing tag
const result = html.replace(regex, () => {
// get the last open tag from the stack
const lastOpenTag = stack.pop();

// construct the closing tag
return `</${lastOpenTag}>`;
});
// return the HTML code
return result
}

然而，当尝试时，发生了以下情况:

输入:

<button>I'm a button!</>
I am text!

输出:

<button>I'm a button! I am text!</button>

你能帮我修复这个函数吗?

Answer 1

我找到了一个解决方案。这不是我想要的，但也差不多了。我知道这是非常接近PHP，但对于我的目的，它是好的。也许我会把问号换成话题标签。它允许以下语法:

<?div>
tag content
</?>

To turn into:

<div>
tag content
</div>

这是代码:

const findUnknownTags = (html:string):string => {
// I am pretty sure this covers all cases. Correct me if I am wrong.
const pattern = /<?(w+)>((?:(?!<?|?>).)*)</?>/g;
const matches = html.matchAll(pattern);

for (const match of matches) {
const rawTagName = match[1]
const tagName = `<${match[1]}>`;
const tagContent = match[2];
const closingTag = `</${rawTagName}>`;

html = html.replace(match[0], `${tagName}${tagContent}${closingTag}`);
}

return html;
}
}