logo标签列表

JS正则表达式替换元素属性中的<和>

javascripthtmlregexstring
3
我希望将html元素属性中的&lt;和&gt;替换为<和>，或者换句话说，在="和"之间进行替换。
我尝试过自己做，但是没有匹配到任何内容。如果能够分解正则表达式，那就更好了，这样我可以尝试理解并最终自己编写这些代码。
实际上，<*=" 和 "*> 之间的任何地方都更好。 - bearfriend
1
你确定那是你的真实数据吗？这意味着在生成HTML时进行了双重编码，这本身就是一个问题。 - Álvaro González
@dg988 我在我的回答中添加了另一种方法来解决这个问题。你可以去看看，看看那是否是你想要的。 - Joeytje50
那看起来就是我想要的！ - bearfriend
先进行测试。如果有效，我会接受的。 - bearfriend
显示剩余2条评论
3个回答
2
你可以通过使用 while 循环来实现此操作，该循环检查是否仍有标签需要替换：
var htmlString = '<div id="&lt;lol&gt;"><span title="&lt;&gt;&lt; &lt;&gt;&lt; &lt;&gt;&lt; fish">hover for fishies</span></div>';
while (htmlString.match(/="([^"]*)\&[gl]t;([^"]*)"/g)) {
    htmlString = htmlString.replace(/="([^"]*)\&gt;([^"]*)"/g, '="$1>$2"')
        .replace(/="([^"]*)\&lt;([^"]*)"/g, '="$1<$2"');
}

这个循环会一直进行，直到 HTML 字符串中没有 &gt; 或 &lt; 匹配项为止。
之所以不能用单个正则表达式替换完成（至少我不知道怎么做），是因为你需要匹配 =" 和 " 之间的每一个 &lt; 或 &gt;。使用正则表达式，这意味着你必须像这样做：/="([^"]*)(\&[lg]t;([^"]*))*"/g 来匹配所有它们，但这意味着你无法再检索捕获组，这就使得将其替换为其他内容变得不可能。
然而，你也可以通过回调函数在替换过程中实现此操作：
var htmlString = '<div id="&lt;lol&gt;"><span title="&lt;&gt;&lt; &lt;&gt;&lt; &lt;&gt;&lt; fish">hover for fishies</span></div>';
htmlString = htmlString.replace(/="[^"]*\&[gl]t;[^"]*"/g, function(match) {
   return match.replace(/\&gt;/g, '>').replace(/\&lt;/g, '<'); 
});

这将首先匹配每个属性，其中包含&lt;或&gt;，然后对字符串的匹配部分执行替换。

1
string.replace(/="[^"]+"/g,function($0){return $0.replace(/&lt;/g,"<").replace(/&gt;/g,">");})

这行代码的作用：

  • 在字符串中查找以="开头，以"结尾的文本
  • 在此文本中：将所有&lt;替换为<
  • 在此文本中：将所有&gt;替换为>

在函数中，$0代表匹配的字符串="[^"]+"。

访问此页面获取有关字符串替换的更多详细信息。

0
如果您正在浏览器中进行此操作，请尝试以下方法：
function removeDoubleEncoding( element ){
    Array.prototype.forEach.call( element.attributes, function replaceString( attribute ){
        attribute.value = attribute.value.replace( '&lt;', '<' ).replace( '&gt;', '>' );
    } );
}

因此，使用：

<body class="&lt;erg&gt;">

你可以按照以下方式应用该函数...

removeDoubleEncoding( document.body );

最终得到：

<body class="<erg>">
我喜欢这个想法，但我担心与正则表达式相比可能会非常密集。有人对此有什么想法吗？我必须在模板中的每个元素上递归调用它，其中一些元素非常大。 - bearfriend
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接