Преобразование HTML в обычный текст с сохранением ссылок жирным шрифтом и курсивом в Javascript
Я настраиваю API для отправки электронного письма, используя содержимое публикации в качестве тела электронного письма. Текстовый редактор, используемый для публикации, сохраняет текст в формате HTML, поэтому мне нужно было преобразовать результат в обычный текст. Есть и другие вопросы, которые дали мне решение, но я хотел бы сохранить из исходного текста жирный текст, курсив и ссылки. Итак, вот что у меня есть:
- Текст тестовой публикации:
Это жирный текст.
Это обычный текст.
Это курсив.
Это ссылка.
Затем в сценарии у меня есть следующая функция:
function htmlToText(html){
//remove code brakes and tabs
html = html.replace(/\n/g, "");
html = html.replace(/\t/g, "");
//keep html brakes and tabs
html = html.replace(/</td>/g, "\t");
html = html.replace(/</table>/g, "\n");
html = html.replace(/</tr>/g, "\n");
html = html.replace(/</p>/g, "\n");
html = html.replace(/</div>/g, "\n");
html = html.replace(/</h>/g, "\n");
html = html.replace(/<br>/g, "\n"); html = html.replace(/<br( )*/>/g, "\n");
html = html.replace(/<a.*href = "(.*?)".*>(.*?)</a>/gi, " $2 (Link->$1) ");
//parse html into text
var dom = (new DOMParser()).parseFromString('<!doctype html><body>' + html, 'text/html');
return dom.body.textContent;
}
Это дает мне простой текст с хорошими разрывами строк, но мне было интересно, смогу ли я получить жирный шрифт, курсив и ссылки.
Спасибо.
Вот почему это в первую очередь называется текстом простой ^^
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У меня было немного свободного времени, и я поиграл. Вот что я придумал:
const copy=document.createElement("div");
copy.innerHTML=container.innerHTML.replace(/\n/g," ").replace(/[\t\n]+/g,"");
const tags = {B:["**","**",1], // [<prefix>, <postfix>, <sequence-number> ]
I:["*","*",2],
H2:["##","\n",3],
P:["\n","\n",4],
DIV:["","\n",5],
TD:["","\t",6]};
[...copy.querySelectorAll(Object.keys(tags).join(","))]
.sort((a,b)=>tags[a.tagName][2]-tags[b.tagName][2])
.forEach(e=>{
const [a,b]=tags[e.tagName];
e.innerHTML=(e.matches("TD:first-child") ? "\n": a) + e.innerHTML + b;
});
console.info(copy.textContent.replace(/^ */mg,""));<div id = "container">
<H2>Second level heading</H2>
<div><div>
A <b>first div</b> with a
<a href = "abc.html">link (abc)</a> and a
<p>paragraph having itself another <a href = "def.html">link (def)</a> in it.</p>
</div>
</div>
And here is some more <i>"lost" text</i> ...
<table>
<tr><td>one</td><td><b>two</b></td><td>three</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td>e</td><td>f</td></tr>
</table>
</div>Вместо того, чтобы использовать регулярное выражение для «разбора» html, я решил на самом деле обрабатывать его способом DOM: я создаю новый элемент div (copy), в который я вставляю исходный .innerHTML. Затем для определенных типов элементов я определяю некоторые пре- и постфиксы, которые должны окружать исходный .innerHTML. Они хранятся в tags и применяются к только что созданному элементу div.
Это делается путем выбора всех «специальных» элементов (указанных клавишами tags) и их обработки в заданном последовательном порядке. После этого я просто возвращаю .textContent измененного copy элемента.
Обычный текст не может отображать полужирное или курсивное оформление текста. По этой причине я использовал модификаторы в стиле уценки (*: курсив, **: полужирный).
Вы должны стилизовать ссылку с помощью CSS, обычный текст не имеет стилей.