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

Question

例如,我从维基百科中复制了一些内容/段落,然后我想动态地在我的网页中粘贴代码,但它显示了很多内联样式.我想干净,需要适当的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="..."使用此功能将删除内部的任何内容.

gin regex用于在regex中的给定字符串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>