Обычно на стороне сервера вы можете использовать ряд функций PHP (таких как strip_tags) и убрать HTML и некрасивое форматирование. Однако, если вы не можете использовать сервер (или используете Node.js) для выполнения этой задачи, вы все равно можете использовать Javascript для этого. В этой статье вы найдете 3 способа вырезать HTML-теги из строки в Javascript.
1. Создайте временный элемент DOM и получите текст
Это предпочтительный (и рекомендуемый) способ вырезать HTML из строки с помощью Javascript. Содержимое временного элемента div будет предоставленной HTML-строкой для удаления, а затем из div элемент вернуть innerText имущество:
/**
* Returns the text from a HTML string
*
* @param {html} String The html string
*/
function stripHtml(html){
// Create a new div element
var temporalDivElement = document.createElement("div");
// Set the HTML content with the providen
temporalDivElement.innerHTML = html;
// Retrieve the text property of the element (cross-browser support)
return temporalDivElement.textContent || temporalDivElement.innerText || "";
}
var htmlString= "
Hello World\nIt's me, Mario
";
//Hello World
//It's me, Mario
console.log(stripHtml(htmlString));Единственная проблема этого (и преимущества) заключается в том, что браузер будет обрабатывать предоставленную строку как HTML, это означает, что если строка HTML содержит некоторый тип интерпретируемого Javascript для браузера, то она будет выполнена:
// This won't do anything but retrieve the text
stripHtml("alert(\"Hello\");")
// But this ...
stripHtml("
")Поэтому вы должны использовать это, только если вы доверяете источнику строки HTML.
2. Если вы используете jQuery
Если вы используете jQuery, вы можете упростить код с первого шага. Следующий код будет делать то же, что и код на первом шаге (предупреждения также применимы):
var htmlString= "
\n Hello World\n This is the text that we should get.
\n Our Code World © 2017
\n
";
var stripedHtml = $("
").html(htmlString).text();
// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml);3. С регулярным выражением
Если вы работаете в среде Node, где нет ни document или же createElement метод, то вы можете использовать регулярное выражение для замены всех тегов HTML из строки:
var htmlString= "
Hello World\nIt's me, Mario
";
var stripedHtml = htmlString.replace(/]+>/g, '');
//Hello World
//It's me, Mario
console.log(stripedHtml);Этот метод будет работать отлично, но он удалит только символы меньше и больше (< а также >), это означает, что HTML-сущности не удаляются из строки как показано в следующем примере:
var htmlString= "
\n Hello World\n This is the text that we should get.
\n Our Code World © 2017
\n
";
var stripedHtml = htmlString.replace(/]+>/g, '');
// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml); © Сущность должна быть переведена как символ авторского права, однако она все еще существует как HTML-сущность. Это явно недостаток, если вы сравните его с первым методом, но не волнуйтесь, не все потеряно (пока нет). Вы можете использовать Javascript для декодирования htmlentities в читаемые символы . В следующем примере будут удалены все html, используя ранее упомянутую инструкцию замены, и преобразованы htmlentities в читаемые человеком символы, используя библиотека он:
var htmlString= "
\n Hello World\n This is the text that we should get.
\n Our Code World © 2017
\n
";
var stripedHtml = htmlString.replace(/]+>/g, '');
var decodedStripedHtml = he.decode(stripedHtml);
// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml);
// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(decodedStripedHtml);Как вы можете видеть, используя библиотеку he, мы преобразовали оставшиеся html-сущности в читаемое значение. Обратите внимание, что вам не обязательно использовать библиотеку he, потому что вы можете .
