提问人：new_coder 提问时间：11/12/2023 更新时间：11/12/2023 访问量：58
Javascript - 在单个函数中用新字符替换多个 html 元素
Javascript - replace multiple html elements with new chars in a single function
问：
我正在尝试查找和替换 html 标签，并在单个函数中将它们全部替换为不同的字符。
目的是创建一个函数来对大块文本进行多次查找和替换。我首先尝试使用一个小块，但似乎难以替换某些标签
const paragraph = '<p>I think Ruth's dog <a href="test-link/">is</a> cuter than your dog!
</p>';
console.log(paragraph.replaceAll('<a href="', '<a href=\"{{store}}'));
console.log(paragraph.replaceAll('/">', '\/\">'));
console.log(paragraph.replaceAll('</p>', '<\/p>'));
如果有人对如何正确地做到这一点有任何建议，那就太好了。
谢谢
答：
0赞
James Hibbard
11/12/2023
#1
编写一些代码将您的输入转换为所需的输出会很容易，但我不确定这对您有多大帮助。
相反，更好的办法是确定你试图做的事情的规则。这是我到目前为止所理解的（如果我错了，请纠正我）：
- 结束标签需要斜杠转义，即 成为和成为
</a><\/a></p><\/p> - 值内的斜杠被转义，即 成为
href<a href="test-link/">is</a><a href="test-link\/">is</a> - 围绕该值的引号被转义，即 成为
href<a href="test-link/">is</a><a href=\"test-link/\">is</a> - 该值以 ，即 成为
href{{store}}<a href="test-link/">is</a><a href="{{store}}test-link/">is</a>
为此，我通过将其包含在反引号（而不是单引号）中来快速更改您的测试段落，因为它已经包含一个会导致所有内容中断的单引号。要么这样，要么你转义单引号。
无论如何，这是我们的测试输入：
const html = `
<p>I think Ruth's dog <a href="test-link/">is</a> cuter than your dog!</p>
`;
针对此运行以下代码：
const updatedHtml = html
.replace(/<\/(\w+)>/g, '<\\/$1>')
.replace(/<a href="([^"]+)">/g, (match, p1) => `<a href="${p1.replace(/\//g, '\\/')}">`)
.replace(/<a href="(.+?)">/g, '<a href=\\"{{store}}$1\\">');
console.log(updatedHtml);
我们得到您想要的输出：
<p>I think Ruth's dog <a href=\"{{store}}test-link\/\">is<\/a> cuter than your dog!<\/p>
出于测试目的，让我们扩展 HTML 代码：
const html = `
<p>I think Ruth's dog <a href="test-link/">is</a> cuter than your dog!</p>
<div><p>I <em>think</em> Ruth's dog <a href="one/two/three/">is</a> cuter than your dog!</p></div>
`;
给我们：
<p>I think Ruth's dog <a href=\"{{store}}test-link\/\">is<\/a> cuter than your dog!<\/p>
<div><p>I <em>think<\/em> Ruth's dog <a href=\"{{store}}one\/two\/three\/\">is<\/a> cuter than your dog!<\/p><\/div>
这也希望符合您的规则。
使用正则表达式解析 HTML 是一个非常棘手的过程，所以我的建议是使用正则表达式来帮助您完成大部分工作，然后手动检查最后 10%。
评论