Hapus Tag HTML di Javascript dengan Regex

108

Saya mencoba untuk menghapus semua tag html dari sebuah string di Javascript. Inilah yang saya miliki ... Saya tidak tahu mengapa tidak berhasil .... ada yang tahu apa yang saya lakukan salah?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

Terima kasih banyak!

javascript regex Gabe
sumber

Jawaban:

237

Coba ini, perhatikan bahwa tata bahasa HTML terlalu rumit untuk 100% benar untuk ekspresi reguler:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

Jika Anda ingin menggunakan pustaka seperti jQuery , Anda cukup melakukan ini:

console.log($('<p>test</p>').text());
karim79.dll
sumber
2
Mengapa Anda membungkus ekspresi reguler dalam sebuah string? var regex = / (<([^>] +)>) / ig;
brianari
Ini tidak akan berhasil. Secara khusus, ini akan gagal pada tag pendek: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel
4
Ini adalah pertanyaan lama, tetapi saya akan memposting ini di sini: jsperf.com/regex-replace-vs-jquery-text
Joshua
2
Coba jalankan ini "<img src=bogus onerror=alert(1337)". Yang pertama gagal karena parser HTML tidak mengharuskan tag terakhir ditutup oleh a >, dan yang kedua gagal karena pemuatan gambar dimulai bahkan sebelum pohon DOM yang diurai ditambahkan ke DOM, dan $('<img ...>')memanggil parser HTML.
Mike Samuel
1
Solusi regex juga akan gagal jika a >disertakan dalam nilai atribut; seperti ini<div data="a + b > c">
MT0
34

Ini adalah pertanyaan lama, tetapi saya menemukan itu dan berpikir saya akan membagikan metode yang saya gunakan:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized sekarang akan berisi: "some text and some more text"

Sederhana, tidak perlu jQuery, dan tidak akan mengecewakan Anda bahkan dalam kasus yang lebih kompleks.

jsdw
sumber
Hai. Nah, pada dasarnya semua yang dilakukannya adalah membuat DIV baru, mengatur konten HTML bagian dalam ke apa pun yang disediakan (yang saya asumsikan berarti kode HTML apa pun diurai), dan kemudian meminta semua konten teks div, yang mengabaikan HTML tersebut. .
jsdw
di browser saya, objek tidak memiliki bidanginnerText
Adrian
@Adrian baris terakhir akan memilih keluaran temp.textContentjika ada, dan hanya mencoba temp.innerTextjika tidak ada. Browser Anda harus memiliki yang pertama, tetapi untuk browser yang tidak, yang terakhir digunakan sebagai gantinya :)
jsdw
Setelah melihat ini lagi (ada begitu banyak jawaban di luar sana). Saya menggunakan metode ini. Ini adalah metode yang sama yang digunakan dalam text-angular. Mereka telah menambahkan beberapa tambahan yang telah saya sertakan di utas ini
Rentering.com
Solusi ini gagal untuk saya, saya menggunakan @kolkov Text Editor for Angular.
Waseem Ahmad Naeem
10

Ini berhasil untuk saya.

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

sumber
5
+1 terima kasih. liner yang satu ini dibangun sempurna untuk kebutuhan saya. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger
6

Berikut adalah cara TextAngular (WYSISYG Editor) melakukannya. Saya juga menemukan ini sebagai jawaban yang paling konsisten, yaitu TANPA REGEX.

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}
Rentering.com
sumber
2

Anda dapat menggunakan perpustakaan yang kuat untuk manajemen String yaitu undrescore.string.js 

_('a <a href="#">link</a>').stripTags()

=> 'tautan'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'a linkalert ("hello world!")'

Jangan lupa untuk mengimpor lib ini sebagai berikut: 

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>
Abdennour TOUMI
sumber
2
Saya melihat sumbernya, dan mereka benar-benar menggunakan regex yang sama yang disarankan dalam jawaban lain secara internal.
eugene
2

Pustaka JavaScript sederhana saya bernama FuncJS memiliki fungsi yang disebut "strip_tags ()" yang melakukan tugas untuk Anda - tanpa mengharuskan Anda memasukkan ekspresi reguler.

Misalnya, Anda ingin menghapus tag dari sebuah kalimat - dengan fungsi ini, Anda dapat melakukannya seperti ini:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

Ini akan menghasilkan "String ini berisi banyak tag!".

Untuk pemahaman yang lebih baik, silakan baca dokumentasi di GitHub FuncJS .

Selain itu, jika Anda mau, berikan umpan balik melalui formulir. Itu akan sangat membantu saya!

Sharikul Islam
sumber
Bisakah Anda memberikan apa yang strip_tags()bukan hanya mempromosikan perpustakaan Anda dan tidak menjelaskannya? Tautan menjelaskan penggunaan API tetapi tidak menjelaskan fungsinya .
Justin Beaudry
1
baik, menemukannya di situs web yang dia berikan,strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };
Predrag Stojadinović
1

Ini adalah solusi untuk tag HTML dan & nbsp dll dan Anda dapat menghapus dan menambahkan ketentuan untuk mendapatkan teks tanpa HTML dan Anda dapat menggantinya dengan apa pun.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}
Sahil Ralkar
sumber
0 
<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>
Surya R Praveen
sumber
0

Jawaban yang dipilih tidak selalu memastikan bahwa HTML dihilangkan, karena masih mungkin untuk membuat string HTML yang tidak valid melaluinya dengan membuat string seperti berikut.

  "<<h1>h1>foo<<//</h1>h1/>"

Masukan ini akan memastikan bahwa stripping menyusun satu set tag untuk Anda dan akan menghasilkan:

  "<h1>foo</h1>"

Selain itu, fungsi teks jquery akan menghapus teks yang tidak dikelilingi oleh tag.

Berikut adalah fungsi yang menggunakan jQuery tetapi harus lebih kuat terhadap kedua kasus ini:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};
Rick Moynihan
sumber
0

Cara saya melakukannya praktis satu baris.

Fungsi membuat objek Range dan kemudian membuat DocumentFragment di Range dengan string sebagai konten anak.

Kemudian ia mengambil teks dari fragmen, menghapus karakter "tak terlihat" / lebar-nol, dan memotongnya dari spasi kosong di depan / di belakang.

Saya menyadari pertanyaan ini sudah lama, saya hanya mengira solusi saya unik dan ingin dibagikan. :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);
ElijahFowler
sumber
-1

Seperti yang dinyatakan orang lain, regex tidak akan berfungsi. Luangkan waktu sejenak untuk membaca artikel saya tentang mengapa Anda tidak dapat dan tidak boleh mencoba mengurai html dengan regex, yang Anda lakukan saat mencoba untuk menghapus html dari string sumber Anda.

Cole
sumber