JavaScript -在一个函数中用新字符替换多个html元素

l0oc07j2  于 2023-11-15  发布在  Java
关注(0)|答案(1)|浏览(97)

我试图找到并替换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>'));

字符串
如果有人有任何建议,如何正确地做到这一点,这将是伟大的。
谢谢

iyr7buue

iyr7buue1#

编写一些代码将您的输入转换为所需的输出是相当容易的,但我不确定这会对您有多大帮助。
更好的办法是确定你要做的事情的规则。这是我到目前为止所理解的(如果我说错了,请纠正我):

  • 结束标记需要使用斜杠转义,即</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>


希望这也符合你的规矩。
用regex解析HTML是一个infamously tricky process,所以我的建议是使用regex来完成大部分工作,然后手动检查最后10%的工作。

相关问题