ลบแท็ก HTML ใน Javascript ด้วย Regex

108

ฉันกำลังพยายามลบแท็ก html ทั้งหมดออกจากสตริงใน Javascript นี่คือสิ่งที่ฉันมี ... ฉันคิดไม่ออกว่าทำไมมันถึงไม่ทำงาน .... รู้ไหมว่าฉันทำอะไรผิด?

<script type="text/javascript">

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

</script>

ขอบคุณมาก!

javascript regex

— Gabe
แหล่งที่มา

237

ลองใช้วิธีนี้โดยสังเกตว่าไวยากรณ์ของ HTML ซับซ้อนเกินกว่าที่นิพจน์ทั่วไปจะถูกต้อง 100% ของเวลา:

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

console.log(result);

หากคุณต้องการใช้ไลบรารีเช่นjQueryคุณสามารถทำได้ง่ายๆ:

console.log($('<p>test</p>').text());

— คาริม 79
แหล่งที่มา

2

เหตุใดคุณจึงตัดนิพจน์ทั่วไปในสตริง var regex = / (<([^>] +)>) / ig;

— brianary

วิธีนี้ใช้ไม่ได้ โดยเฉพาะมันจะล้มเหลวในแท็กสั้น ๆ : is-thought.co.uk/book/sgml-9.htm#SHORTTAG

— Mike Samuel

4

นี่เป็นคำถามเก่า แต่ฉันจะโพสต์ที่นี่: jsperf.com/regex-replace-vs-jquery-text

— Joshua

2

"<img src=bogus onerror=alert(1337)"ลองใช้นี้ ครั้งแรกล้มเหลวเนื่องจากตัวแยกวิเคราะห์ HTML ไม่ต้องการให้แท็กสุดท้ายปิดโดย a >และแท็กที่สองล้มเหลวเนื่องจากการโหลดรูปภาพเริ่มต้นก่อนที่โครงสร้าง DOM ที่แยกวิเคราะห์จะถูกเพิ่มลงใน DOM และ$('<img ...>')เรียกใช้ตัวแยกวิเคราะห์ HTML

— Mike Samuel

1

โซลูชัน regex จะล้มเหลวหาก>รวมa ไว้ในค่าแอตทริบิวต์ แบบนี้<div data="a + b > c">

— MT0

34

นี่เป็นคำถามเก่า แต่ฉันเจอคำถามนี้และคิดว่าฉันจะแบ่งปันวิธีที่ฉันใช้:

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 ตอนนี้จะประกอบด้วย: "some text and some more text"

เรียบง่ายไม่จำเป็นต้องใช้ jQuery และไม่ควรทำให้คุณผิดหวังแม้ในกรณีที่ซับซ้อนมากขึ้น

— jsdw
แหล่งที่มา

สวัสดี โดยพื้นฐานแล้วสิ่งที่ทำคือสร้าง DIV ใหม่ตั้งค่าเนื้อหา HTML ภายในเป็นสิ่งที่จัดเตรียมไว้ (ซึ่งฉันคิดว่าหมายถึงรหัส HTML ใด ๆ ที่ถูกแยกวิเคราะห์) จากนั้นขอเนื้อหาข้อความทั้งหมดของ div ซึ่งไม่สนใจ HTML ดังกล่าว .

— jsdw

ในเบราว์เซอร์ของฉันวัตถุไม่มีฟิลด์innerText

— Adrian

@ เอเดรียนบรรทัดสุดท้ายจะเลือกผลลัพธ์temp.textContentว่ามีอยู่หรือไม่และลองเฉพาะtemp.innerTextเมื่อไม่มี เบราว์เซอร์ของคุณควรมีแบบเดิม แต่สำหรับเบราว์เซอร์ที่ไม่มีให้ใช้ตัวหลังแทน :)

— jsdw

หลังจากตรวจสอบสิ่งนี้อีกครั้ง (มีคำตอบมากมายอยู่ที่นั่น) ฉันใช้วิธีนี้ นี่เป็นวิธีเดียวกับที่ใช้ในข้อความเชิงมุม พวกเขาได้เพิ่มความพิเศษสองสามอย่างที่ฉันรวมไว้ในชุดข้อความนี้

— Rentering.com

วิธีนี้ล้มเหลวสำหรับฉันฉันใช้ @kolkov Text Editor สำหรับ Angular

— Waseem Ahmad Naeem

10

สิ่งนี้ได้ผลสำหรับฉัน

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

5

+1 ขอบคุณ ซับนี้เหมาะสำหรับความต้องการของฉัน console.log( my_html.replace(/( |<([^>]+)>)/ig, "") );

— DaveAlger

6

นี่คือวิธีที่ TextAngular (WYSISYG Editor) กำลังทำอยู่ ฉันพบว่านี่เป็นคำตอบที่สอดคล้องกันมากที่สุดซึ่งก็คือ NO 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
แหล่งที่มา

2

คุณสามารถใช้ไลบรารีที่มีประสิทธิภาพสำหรับสตริงการจัดการซึ่งเป็นundrescore.string.js

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

=> 'ลิงค์'

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

=> 'linkalert ("สวัสดีชาวโลก!")'

อย่าลืมนำเข้า lib นี้ดังต่อไปนี้:

        <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
แหล่งที่มา

2

ฉันดูแหล่งที่มาและพวกเขาใช้ regex เดียวกันที่แนะนำในคำตอบอื่น ๆ เป็นการภายใน

— eugene

2

ไลบรารี JavaScript แบบธรรมดาของฉันชื่อ FuncJS มีฟังก์ชันที่เรียกว่า "strip_tags ()" ซึ่งทำงานให้คุณโดยไม่ต้องให้คุณป้อนนิพจน์ทั่วไป

ตัวอย่างเช่นบอกว่าคุณต้องการลบแท็กออกจากประโยค - ด้วยฟังก์ชันนี้คุณสามารถทำได้ง่ายๆดังนี้:

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

ซึ่งจะทำให้เกิด "สตริงนี้มีแท็กจำนวนมาก!"

เพื่อความเข้าใจที่ดีขึ้นโปรดอ่านเอกสารที่ GitHub FuncJS

นอกจากนี้หากคุณต้องการโปรดให้ข้อเสนอแนะผ่านแบบฟอร์ม มันจะเป็นประโยชน์กับฉันมาก!

— ชาริคุลอิสลาม
แหล่งที่มา

คุณอาจให้สิ่งที่strip_tags()ทำแทนการโปรโมตห้องสมุดของคุณโดยไม่อธิบายได้หรือไม่ การเชื่อมโยงอธิบายการใช้งาน API แต่ไม่สิ่งที่มันไม่

— Justin Beaudry

1

พบในเว็บไซต์นั้นที่เขาให้

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

นี่เป็นวิธีแก้ปัญหาสำหรับแท็ก HTML และ & nbsp ฯลฯ และคุณสามารถลบและเพิ่มเงื่อนไขเพื่อให้ได้ข้อความที่ไม่มี HTML และคุณสามารถแทนที่ด้วยสิ่งใดก็ได้

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}

— ซาฮิลรัลการ์
แหล่งที่มา

0

สำหรับเจลทำความสะอาด HTML ที่เหมาะสมใน JS โปรดดูhttp://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

— ไมค์ซามูเอล
แหล่งที่มา

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>

— สุริยาร. ประวีณ
แหล่งที่มา

0

คำตอบที่เลือกไม่แน่ใจเสมอไปว่า HTML ถูกขีดฆ่าเนื่องจากยังคงสามารถสร้างสตริง HTML ที่ไม่ถูกต้องได้โดยการสร้างสตริงดังต่อไปนี้

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

การป้อนข้อมูลนี้จะช่วยให้มั่นใจได้ว่าการลอกจะประกอบชุดแท็กสำหรับคุณและจะส่งผลให้:

  "<h1>foo</h1>"

นอกจากนี้ฟังก์ชันข้อความของ jquery จะตัดข้อความที่ไม่ได้ล้อมรอบด้วยแท็ก

นี่คือฟังก์ชั่นที่ใช้ jQuery แต่ควรมีประสิทธิภาพมากกว่าสำหรับทั้งสองกรณีนี้:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};

— ริกมอยนิฮาน
แหล่งที่มา

0

วิธีที่ฉันทำคือซับเดียว

ฟังก์ชันจะสร้างวัตถุ Rangeจากนั้นสร้างDocumentFragmentในช่วงที่มีสตริงเป็นเนื้อหาลูก

จากนั้นจะจับข้อความของส่วนนั้นลบอักขระ "มองไม่เห็น" / อักขระที่มีความกว้างเป็นศูนย์ใด ๆ และจดจ้องกับช่องว่างสีขาวที่นำหน้า / ต่อท้าย

ฉันรู้ว่าคำถามนี้เก่าแล้วฉันแค่คิดว่าวิธีแก้ปัญหาของฉันไม่เหมือนใครและต้องการแบ่งปัน :)

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);

— เอลียาห์ฟาวเลอร์
แหล่งที่มา

-1

เช่นเดียวกับที่คนอื่น ๆ ระบุไว้ regex จะไม่ทำงาน ใช้เวลาสักครู่เพื่ออ่านบทความของฉันเกี่ยวกับสาเหตุที่คุณทำไม่ได้และไม่ควรพยายามแยกวิเคราะห์ html ด้วย regex ซึ่งเป็นสิ่งที่คุณกำลังทำเมื่อคุณพยายามดึง html ออกจากสตริงต้นทางของคุณ

— โคล
แหล่งที่มา