如何使用jQuery从网页中删除复制内容的内联样式？

Question

例如，我从Wikipedia复制了一些内容/段落，然后我想动态地将代码粘贴到我的网页中，但是它显示了很多内联样式。我想要清洁并且需要正确的HTML格式的代码。我尝试了很多方法，但是它删除了所有标签，或者我只想删除多余的内联样式和多余的标签。我将示例代码放在这里。请帮助我实现这一目标。

示例代码：

<span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">In 1896 and named after its inventor, </span><a href="https://en.wikipedia.org/wiki/Georges-Fernand_Widal" title="Georges-Fernand Widal" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; fot-variant-caps: normal; font-weight: 400;">Georges-Fernand Widal</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">, is a presumptive </span><a href="https://en.wikipedia.org/wiki/Serological" class="mw-redirect" title="Serological" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">serological</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> testfor </span><a href="https://en.wikipedia.org/wiki/Enteric_fever" class="mw-redirect" title="Enteric fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">enteric fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> or </span><a href="https://en.wikipedia.org/wiki/Undulant_fever" class="mw-redirect" title="Undulant fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">undulant fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> whereby bacteria causing tphoid and protozoa causing malaria fever are mixed with a serum containing specific antibodies obtained from an infected individual. In cases of </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella" title="Salmonella" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">Salmonella</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> infection, it is a demonstration of the presence of O-soma false-positive result. Test results need to be interpreted carefully to account for any history of enteric fever, </span><a href="https://en.wikipedia.org/wiki/Typhoid" class="mw-redirect" title="Typhoid" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">typhoid</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> vaccination, and the general level of antibodies in the populations in endemic areas of the world. </span><a href="https://en.wikipedia.org/wiki/Typhidot" title="Typhidot" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">Typhidot</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> is the other test used to ascertain the diagnosis of </span><a href="https://en.wikipedia.org/wiki/Typhoid_fever" title="Typhoid fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">typhoid fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">. As with all serological tests, the rise in antibody levels needed to perform the diagnosis takes 7–14 days, which limits its applicability in early diagnosis. Other means of diagnosing </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella_typhi" class="mw-redirect" title="Salmonella typhi" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">Salmonella typhi</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> (and </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella_paratyphi" class="mw-redirect" title="Salmonella paratyphi" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">paratyphi</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">) include cultures of blood, urine and </span><a href="https://en.wikipedia.org/wiki/Faeces" class="mw-redirect" title="Faeces" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">faeces</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">. These organisms produce H</span><sub style="line-height: 1; font-size: 11.2px; color: rgb(34, 34, 34); font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">2</sub><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">S from thiosulfate and can be identified easily on differential media such as </span><a href="https://en.wikipedia.org/wiki/Bismuth_sulfite_agar" title="Bismuth sulfite agar" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">bismuth sulfite agar</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">.</span>

Answer 1

为了提高可读性，我只使用了问题中添加的几行代码。

如果可以使用正则表达式替换html内容中的样式。这是一段有用的代码，您可以尝试一下：

var str = '<span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">In 1896 and named after its inventor, </span><a href="https://en.wikipedia.org/wiki/Georges-Fernand_Widal" title="Georges-Fernand Widal" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; fot-variant-caps: normal; font-weight: 400;">Georges-Fernand Widal</a>';
ret = str.replace(/style=".*?"/gm,'');
console.log(ret);

style="..."内的所有内容都将被删除。

正则表达式中的

g用于给定字符串中的全局搜索 正则表达式中的m用于多行搜索

答案更新：

如果您需要将以上代码解码为HTML格式，则可以看到以下部分：

var str = '<span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">In 1896 and named after its inventor, </span><a href="https://en.wikipedia.org/wiki/Georges-Fernand_Widal" title="Georges-Fernand Widal" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; fot-variant-caps: normal; font-weight: 400;">Georges-Fernand Widal</a>';
ret = str.replace(/style=".*?"/gm, '');
// console.log(ret);

var parser = new DOMParser;
var dom = parser.parseFromString(
  '<!doctype html><body>' + ret,
  'text/html');
var decodedString = dom.body.textContent;
// console.log(decodedString);

var actualHTML = $('<textarea />').html(decodedString).text();
console.log(actualHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

想看看你到目前为止一直在尝试什么

要删除嵌入式样式，请使用$("#Div").removeAttr("style");

Answer 3

我现在明白了，还有您想要摆脱使用的不需要的html实体的样式，并提供了等效的html代码供您使用。

如果这是您要寻找的，下面列出的解决方案。

下面说的是您从维基百科获取的字符串，

var str = '<span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">In 1896 and named after its inventor, </span><a href="https://en.wikipedia.org/wiki/Georges-Fernand_Widal" title="Georges-Fernand Widal" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; fot-variant-caps: normal; font-weight: 400;">Georges-Fernand Widal</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">, is a presumptive </span><a href="https://en.wikipedia.org/wiki/Serological" class="mw-redirect" title="Serological" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">serological</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> testfor </span><a href="https://en.wikipedia.org/wiki/Enteric_fever" class="mw-redirect" title="Enteric fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">enteric fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> or </span><a href="https://en.wikipedia.org/wiki/Undulant_fever" class="mw-redirect" title="Undulant fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">undulant fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> whereby bacteria causing tphoid and protozoa causing malaria fever are mixed with a serum containing specific antibodies obtained from an infected individual. In cases of </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella" title="Salmonella" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">Salmonella</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> infection, it is a demonstration of the presence of O-soma false-positive result. Test results need to be interpreted carefully to account for any history of enteric fever, </span><a href="https://en.wikipedia.org/wiki/Typhoid" class="mw-redirect" title="Typhoid" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">typhoid</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> vaccination, and the general level of antibodies in the populations in endemic areas of the world. </span><a href="https://en.wikipedia.org/wiki/Typhidot" title="Typhidot" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">Typhidot</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> is the other test used to ascertain the diagnosis of </span><a href="https://en.wikipedia.org/wiki/Typhoid_fever" title="Typhoid fever" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">typhoid fever</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">. As with all serological tests, the rise in antibody levels needed to perform the diagnosis takes 7–14 days, which limits its applicability in early diagnosis. Other means of diagnosing </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella_typhi" class="mw-redirect" title="Salmonella typhi" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">Salmonella typhi</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> (and </span><i style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"><a href="https://en.wikipedia.org/wiki/Salmonella_paratyphi" class="mw-redirect" title="Salmonella paratyphi" style="color: rgb(11, 0, 128); background-image: none; background-position: initial;">paratyphi</a></i><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">) include cultures of blood, urine and </span><a href="https://en.wikipedia.org/wiki/Faeces" class="mw-redirect" title="Faeces" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">faeces</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">. These organisms produce H</span><sub style="line-height: 1; font-size: 11.2px; color: rgb(34, 34, 34); font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">2</sub><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">S from thiosulfate and can be identified easily on differential media such as </span><a href="https://en.wikipedia.org/wiki/Bismuth_sulfite_agar" title="Bismuth sulfite agar" style="color: rgb(11, 0, 128); background-image: none; background-position: initial; background-color: rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">bismuth sulfite agar</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">.</span>';

您要做的第一件事就是摆脱样式属性。您可以按以下方式使用正则表达式。

str = str.replace(/style=".*?"/gm,'');

现在将这个字符串解析为HTML文档。为此，您将必须在DOM中创建一个div元素，然后将其作为innerHTML分配给创建的div元素。

var div = document.createElement('div');
div.innerHTML = str;
var result = div.childNodes[0].nodeValue;
console.log(result);

在控制台中，您将看到已解析的HTML代码。 希望这会有所帮助！