Как удалить встроенный стиль скопированного содержимого с веб-страницы с помощью 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="..." будет удалено с помощью этого.

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

Я получил его сейчас, вместе со стилями, которые вы хотите избавить от используемых нежелательных 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-документ.Для этого вам нужно будет либо создать элемент div в DOM, а затем назначить его как innerHTML для созданного элемента div.

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

В вашей консоли вы увидите проанализированный HTML-код.Надеюсь, это поможет !!

Answer 3

Хотелось бы увидеть, что вы пробовали до сих пор

Чтобы удалить встроенный стиль, используйте $("#Div").removeAttr("style");