มีวิธีง่ายๆในการใช้สตริง html ใน JavaScript และตัดออก html หรือไม่
มีวิธีง่ายๆในการใช้สตริง html ใน JavaScript และตัดออก html หรือไม่
คำตอบ:
หากคุณใช้เบราว์เซอร์วิธีที่ง่ายที่สุดคือให้เบราว์เซอร์ทำเพื่อคุณ ...
function stripHtml(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
หมายเหตุ: เนื่องจากคนอื่น ๆ ได้ระบุไว้ในความคิดเห็นซึ่งจะเป็นการหลีกเลี่ยงที่ดีที่สุดหากคุณไม่ได้ควบคุมแหล่งที่มาของ HTML (ตัวอย่างเช่นอย่าใช้สิ่งนี้กับสิ่งที่อาจมาจากการป้อนข้อมูลของผู้ใช้) สำหรับสถานการณ์เหล่านั้นคุณยังคงสามารถให้เบราว์เซอร์ทำงานแทนคุณได้- ดูคำตอบของ Saba เกี่ยวกับการใช้ DOMParser ที่มีอยู่ในปัจจุบัน
strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
myString.replace(/<[^>]*>?/gm, '');
<img src=http://www.google.com.kh/images/srpr/nav_logo27.png onload="alert(42)"
ถ้าคุณกำลังฉีดผ่านdocument.write
หรือเชื่อมโยงกับสตริงที่มีหนึ่งก่อนที่จะฉีดผ่านทาง>
innerHTML
>
จะเหลือในครั้งที่สอง นั่นไม่ใช่อันตรายจากการฉีด อันตรายเกิดขึ้นเนื่องจาก<
ทิ้งไว้ในครั้งแรกซึ่งทำให้ตัวแยกวิเคราะห์ HTML อยู่ในบริบทอื่นนอกเหนือจากสถานะข้อมูลเมื่อเริ่มต้นที่สอง โปรดทราบว่าไม่มีการเปลี่ยนจากสถานะข้อมูล>
เป็น
<button onClick="dostuff('>');"></button>
สมมติว่าเขียน HTML อย่างถูกต้องคุณยังต้องคำนึงว่าเครื่องหมายที่มากกว่านั้นอาจอยู่ในข้อความที่ยกมาในแอตทริบิวต์ นอกจากนี้คุณต้องการลบข้อความทั้งหมดภายใน<script>
แท็กอย่างน้อยที่สุด
วิธีที่ง่ายที่สุด:
jQuery(html).text();
ที่ดึงข้อความทั้งหมดจากสตริงของ html
ผมอยากจะแบ่งปันฉบับแก้ไขของShog9 's คำตอบที่ได้รับการอนุมัติ
ดังที่Mike Samuelชี้ด้วยความคิดเห็นฟังก์ชันนั้นสามารถเรียกใช้โค้ดจาวาสคริปต์แบบอินไลน์
แต่Shog9พูดถูก "ให้เบราว์เซอร์ทำเพื่อคุณ ... "
ดังนั้น .. ที่นี่รุ่นที่แก้ไขของฉันโดยใช้DOMParser :
function strip(html){
var doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
ที่นี่รหัสเพื่อทดสอบจาวาสคริปต์แบบอินไลน์:
strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
นอกจากนี้มันไม่ได้ขอทรัพยากรในการแยกวิเคราะห์ (เช่นภาพ)
strip("Just text <img src='https://assets.rbl.ms/4155638/980x.jpg'>")
เป็นส่วนขยายของวิธี jQuery หากสตริงของคุณอาจไม่มี HTML (เช่นหากคุณพยายามลบ HTML ออกจากเขตข้อมูลฟอร์ม)
jQuery(html).text();`
จะส่งคืนสตริงว่างถ้าไม่มี HTML
ใช้:
jQuery('<p>' + html + '</p>').text();
แทน.
อัปเดต: ดัง
ที่ได้กล่าวไว้ในความคิดเห็นในบางกรณีโซลูชันนี้จะเรียกใช้จาวาสคริปต์ที่บรรจุอยู่ภายในhtml
หากค่าที่html
อาจได้รับอิทธิพลจากผู้โจมตีให้ใช้โซลูชันอื่น
$("<p>").html(html).text();
jQuery('<span>Text :) <img src="a" onerror="alert(1)"></span>').text()
ฟังก์ชั่นด้านบนที่โพสต์โดย hypoxide ใช้งานได้ดี แต่ฉันหลังจากสิ่งที่โดยทั่วไปแล้วจะแปลง HTML ที่สร้างขึ้นในโปรแกรมแก้ไขเว็บ RichText (เช่น FCKEditor) และล้าง HTML ทั้งหมด แต่ปล่อยให้ลิงก์ทั้งหมดเนื่องจากฉันต้องการทั้ง HTML และ เวอร์ชันข้อความล้วนเพื่อช่วยในการสร้างชิ้นส่วนที่ถูกต้องไปยังอีเมล STMP (ทั้ง HTML และข้อความธรรมดา)
หลังจากค้นหา Google ด้วยตัวเองเป็นเวลานานและเพื่อนร่วมงานของฉันได้พบสิ่งนี้โดยใช้เครื่องมือ regex ใน Javascript:
str='this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
';
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");
str
ตัวแปรเริ่มออกมาเช่นนี้
this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
จากนั้นหลังจากรันโค้ดแล้วจะมีลักษณะดังนี้: -
this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk) Link Number 1
Now back to normal text and stuff
ในขณะที่คุณสามารถดู HTML ทั้งหมดได้ถูกลบออกและการเชื่อมโยงได้รับการสานต่อด้วยข้อความเชื่อมโยงหลายมิติยังคงเหมือนเดิม นอกจากนี้ฉันได้แทนที่<p>
และ<br>
แท็กด้วย\n
(newline char) เพื่อให้การจัดรูปแบบภาพบางอย่างถูกรักษาไว้
หากต้องการเปลี่ยนรูปแบบลิงก์ (เช่น. BBC (Link->http://www.bbc.co.uk)
) เพียงแค่แก้ไข$2 (Link->$1)
โดยที่$1
คือ URL ของ href / URI และ$2
เป็นข้อความเชื่อมโยงหลายมิติ ด้วยลิงก์โดยตรงในเนื้อความของข้อความไคลเอ็นต์ SMTP ส่วนใหญ่จะแปลงสิ่งเหล่านี้เพื่อให้ผู้ใช้มีความสามารถในการคลิกที่พวกเขา
หวังว่าคุณจะพบว่ามีประโยชน์นี้
การปรับปรุงคำตอบที่ยอมรับ
function strip(html)
{
var tmp = document.implementation.createHTMLDocument("New").body;
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
วิธีที่สิ่งนี้ทำงานแบบนี้จะไม่เป็นอันตราย:
strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
Firefox, Chromium และ Explorer 9+ นั้นปลอดภัย Opera Presto ยังคงมีช่องโหว่ รูปภาพที่กล่าวถึงในสตริงจะไม่ถูกดาวน์โหลดใน Chromium และ Firefox ที่บันทึกคำขอ HTTP
<script><script>alert();
สิ่งนี้ควรทำงานบนสภาพแวดล้อม Javascript ใด ๆ (รวม NodeJS)
const text = `
<html lang="en">
<head>
<style type="text/css">*{color:red}</style>
<script>alert('hello')</script>
</head>
<body><b>This is some text</b><br/><body>
</html>`;
// Remove style tags and content
text.replace(/<style[^>]*>.*<\/style>/gm, '')
// Remove script tags and content
.replace(/<script[^>]*>.*<\/script>/gm, '')
// Remove all opening, closing and orphan HTML tags
.replace(/<[^>]+>/gm, '')
// Remove leading spaces and repeated CR/LF
.replace(/([\r\n]+ +)+/gm, '');
<html><style..>* {font-family:comic-sans;}</style>Some Text</html>
ฉันเปลี่ยนคำตอบของ Jibberboy2000เพื่อรวมหลาย<BR />
รูปแบบของแท็กลบทุกอย่างภายใน<SCRIPT>
และ<STYLE>
แท็กจัดรูปแบบ HTML ที่เป็นผลลัพธ์โดยลบตัวแบ่งบรรทัดและช่องว่างหลายบรรทัดและแปลงรหัส HTML ที่เข้ารหัสบางส่วนให้เป็นปกติ หลังจากการทดสอบบางอย่างปรากฏว่าคุณสามารถแปลงหน้าเว็บเต็มรูปแบบส่วนใหญ่ให้เป็นข้อความแบบเรียบง่ายโดยที่ชื่อหน้าและเนื้อหาจะถูกเก็บไว้
ในตัวอย่างง่ายๆ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->
<head>
<title>This is my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {margin-top: 15px;}
a { color: #D80C1F; font-weight:bold; text-decoration:none; }
</style>
</head>
<body>
<center>
This string has <i>html</i> code i want to <b>remove</b><br>
In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to "normal text" and stuff using <html encoding>
</center>
</body>
</html>
กลายเป็น
นี่คือชื่อของฉัน
สตริงนี้มีรหัส html ที่ฉันต้องการลบ
ในบรรทัดนี้ BBC ( http://www.bbc.co.uk ) ที่มีลิงก์ระบุไว้
ตอนนี้กลับไปที่ "ข้อความปกติ" และสิ่งที่ใช้
ฟังก์ชัน JavaScript และหน้าทดสอบมีลักษณะดังนี้:
function convertHtmlToText() {
var inputText = document.getElementById("input").value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace(/<br>/gi, "\n");
returnText=returnText.replace(/<br\s\/>/gi, "\n");
returnText=returnText.replace(/<br\/>/gi, "\n");
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace(/<p.*>/gi, "\n");
returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
//-- remove all else
returnText=returnText.replace(/<(?:.|\s)*?>/g, "");
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");
//-- get rid of more than 2 spaces:
returnText = returnText.replace(/ +(?= )/g,'');
//-- get rid of html-encoded characters:
returnText=returnText.replace(/ /gi," ");
returnText=returnText.replace(/&/gi,"&");
returnText=returnText.replace(/"/gi,'"');
returnText=returnText.replace(/</gi,'<');
returnText=returnText.replace(/>/gi,'>');
//-- return
document.getElementById("output").value = returnText;
}
มันถูกใช้กับ HTML นี้:
<textarea id="input" style="width: 400px; height: 300px;"></textarea><br />
<button onclick="convertHtmlToText()">CONVERT</button><br />
<textarea id="output" style="width: 400px; height: 300px;"></textarea><br />
/<p.*>/gi
/<p.*?>/gi
<br>
แท็กคุณสามารถใช้การแสดงออกปกติดีแทน: /<br\s*\/?>/
วิธีการที่คุณจะมีเพียงหนึ่งแทนที่แทน 3. นอกจากนี้ก็ดูเหมือนว่าฉันที่ยกเว้นสำหรับการถอดรหัสของหน่วยงานที่คุณสามารถมี regex /<[a-z].*?\/?>/
เดียวอะไรเช่นนี้
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");
นี่เป็นรุ่น regex ซึ่งยืดหยุ่นได้มากกว่า HTML ที่มีรูปแบบไม่ถูกต้องเช่น:
แท็กที่ไม่เปิดเผย
Some text <img
"<", ">" ภายในแอตทริบิวต์แท็ก
Some text <img alt="x > y">
การขึ้นบรรทัดใหม่
Some <a
href="http://google.com">
รหัส
var html = '<br>This <img alt="a>b" \r\n src="a_b.gif" />is > \nmy<>< > <a>"text"</a'
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");
อีกวิธีหนึ่งที่ได้รับการยอมรับน้อยกว่าโซลูชันของ Nickf หรือ Shog9 นั้นคือการเดิน DOM ซ้ำ ๆ โดยเริ่มที่แท็ก <body> และต่อท้ายแต่ละโหนดข้อความ
var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);
function appendTextNodes(element) {
var text = '';
// Loop through the childNodes of the passed in element
for (var i = 0, len = element.childNodes.length; i < len; i++) {
// Get a reference to the current child
var node = element.childNodes[i];
// Append the node's value if it's a text node
if (node.nodeType == 3) {
text += node.nodeValue;
}
// Recurse through the node's children, if there are any
if (node.childNodes.length > 0) {
appendTextNodes(node);
}
}
// Return the final result
return text;
}
หากคุณต้องการเก็บลิงค์และโครงสร้างของเนื้อหา (h1, h2 ฯลฯ ) คุณควรตรวจสอบTextVersionJSคุณสามารถใช้กับ HTML ใดก็ได้แม้ว่ามันจะถูกสร้างขึ้นเพื่อแปลงอีเมล HTML เป็นข้อความธรรมดา
การใช้งานง่ายมาก ตัวอย่างเช่นใน node.js:
var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
หรือในเบราว์เซอร์ด้วย pure js:
<script src="textversion.js"></script>
<script>
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
</script>
นอกจากนี้ยังทำงานร่วมกับ require.js:
define(["textversionjs"], function(createTextVersion) {
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
});
หลังจากลองคำตอบทั้งหมดที่กล่าวถึงมากที่สุดหากไม่ใช่ทั้งหมดมีกรณีที่เป็นขอบและไม่สามารถรองรับความต้องการของฉันได้อย่างสมบูรณ์
ฉันเริ่มสำรวจว่า php ทำอย่างไรและพบกับ php.js lib ซึ่งจำลองวิธี strip_tags ที่นี่: http://phpjs.org/functions/strip_tags/
allowed == ''
ฉันคิดว่าเป็นสิ่งที่ OP ขอมาซึ่งเกือบจะเป็นสิ่งที่ Byron ตอบด้านล่าง (Byron เท่านั้น[^>]
ผิด)
allowed
พารามิเตอร์คุณมีความเสี่ยงต่อ XSS: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')
return<p onclick="alert(1)">mytext</p>
function stripHTML(my_string){
var charArr = my_string.split(''),
resultArr = [],
htmlZone = 0,
quoteZone = 0;
for( x=0; x < charArr.length; x++ ){
switch( charArr[x] + htmlZone + quoteZone ){
case "<00" : htmlZone = 1;break;
case ">10" : htmlZone = 0;resultArr.push(' ');break;
case '"10' : quoteZone = 1;break;
case "'10" : quoteZone = 2;break;
case '"11' :
case "'12" : quoteZone = 0;break;
default : if(!htmlZone){ resultArr.push(charArr[x]); }
}
}
return resultArr.join('');
}
บัญชีสำหรับ> คุณลักษณะภายในและ<img onerror="javascript">
ในองค์ประกอบ dom ที่สร้างขึ้นใหม่
การใช้งาน:
clean_string = stripHTML("string with <html> in it")
การสาธิต:
https://jsfiddle.net/gaby_de_wilde/pqayphzd/
ตัวอย่างคำตอบยอดนิยมที่ทำสิ่งที่น่ากลัว:
string with <a malicious="attribute \">this text should be removed, but is not">example</a>
)
ผู้คนจำนวนมากตอบคำถามนี้ไปแล้ว แต่ฉันคิดว่ามันอาจจะมีประโยชน์ในการแบ่งปันฟังก์ชั่นที่ฉันเขียนที่ดึงแท็ก HTML ออกจากสตริง แต่อนุญาตให้คุณใส่อาเรย์ของแท็กที่คุณไม่ต้องการถอด มันค่อนข้างสั้นและใช้งานได้ดีสำหรับฉัน
function removeTags(string, array){
return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
function f(array, value){
return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
}
}
var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>
ฉันคิดว่าวิธีที่ง่ายที่สุดคือเพียงใช้นิพจน์ปกติตามที่มีคนกล่าวถึงข้างต้น แม้ว่าจะไม่มีเหตุผลที่จะใช้พวกมัน ลอง:
stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
[^<>]
ด้วย[^>]
เพราะแท็กที่ถูกต้องไม่สามารถมี<
อักขระได้ช่องโหว่ XSS จะหายไป
ฉันได้ทำการดัดแปลงสคริปต์ Jibberboy2000 ดั้งเดิมหวังว่ามันจะเป็นประโยชน์สำหรับใครบางคน
str = '**ANY HTML CONTENT HERE**';
str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");
นี่เป็นเวอร์ชั่นที่ sorta เน้นเรื่องความปลอดภัยของ MikeSamuel:
function strip(html)
{
try {
var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
doc.documentElement.innerHTML = html;
return doc.documentElement.textContent||doc.documentElement.innerText;
} catch(e) {
return "";
}
}
หมายเหตุมันจะส่งคืนสตริงว่างถ้ามาร์กอัพ HTML ไม่ใช่ XML ที่ถูกต้อง (aka ต้องปิดแท็กและต้องอ้างแอตทริบิวต์) สิ่งนี้ไม่เหมาะ แต่จะหลีกเลี่ยงปัญหาของความปลอดภัยที่อาจเกิดขึ้น
หากไม่มีมาร์กอัพ XML ที่ถูกต้องเป็นข้อกำหนดสำหรับคุณคุณสามารถลองใช้:
var doc = document.implementation.createHTMLDocument("");
แต่นั่นไม่ใช่โซลูชันที่สมบูรณ์แบบไม่ว่าด้วยเหตุผลอื่น
คุณสามารถดึงแท็ก HTML ใช้แอตทริบิวต์ iframe Sandbox
แนวคิดที่นี่คือแทนที่จะพยายาม regex สตริงของเราเราใช้ประโยชน์จาก parser พื้นเมืองของเบราว์เซอร์โดยการฉีดข้อความลงในองค์ประกอบ DOM แล้วสอบถามคุณสมบัติtextContent
/ innerText
ขององค์ประกอบนั้น
องค์ประกอบที่เหมาะสมที่สุดในการแทรกข้อความของเราคือ iframe แบบ sandboxed วิธีการที่เราสามารถป้องกันการเรียกใช้รหัสโดยอำเภอใจ (หรือที่เรียกว่าXSS )
ข้อเสียของวิธีนี้คือมันใช้ได้เฉพาะกับเบราว์เซอร์เท่านั้น
นี่คือสิ่งที่ฉันได้รับ (ไม่ผ่านการทดสอบการต่อสู้):
const stripHtmlTags = (() => {
const sandbox = document.createElement("iframe");
sandbox.sandbox = "allow-same-origin"; // <--- This is the key
sandbox.style.setProperty("display", "none", "important");
// Inject the sanbox in the current document
document.body.appendChild(sandbox);
// Get the sandbox's context
const sanboxContext = sandbox.contentWindow.document;
return (untrustedString) => {
if (typeof untrustedString !== "string") return "";
// Write the untrusted string in the iframe's body
sanboxContext.open();
sanboxContext.write(untrustedString);
sanboxContext.close();
// Get the string without html
return sanboxContext.body.textContent || sanboxContext.body.innerText || "";
};
})();
การใช้งาน ( สาธิต ):
console.log(stripHtmlTags(`<img onerror='alert("could run arbitrary JS here")' src='bogus'>XSS injection :)`));
console.log(stripHtmlTags(`<script>alert("awdawd");</` + `script>Script tag injection :)`));
console.log(stripHtmlTags(`<strong>I am bold text</strong>`));
console.log(stripHtmlTags(`<html>I'm a HTML tag</html>`));
console.log(stripHtmlTags(`<body>I'm a body tag</body>`));
console.log(stripHtmlTags(`<head>I'm a head tag</head>`));
console.log(stripHtmlTags(null));
let
และ const
นอกจากนี้การใช้โซลูชันของคุณฉันได้รับการอ้างอิงจำนวนมากที่iframes
ไม่ได้ใช้ภายในเอกสาร พิจารณาเพิ่มdocument.body.removeChild(sandbox)
ในรหัสสำหรับผู้อ่านที่คัดลอกพาสต้าในอนาคต
ด้วย jQuery คุณสามารถเรียกคืนได้โดยใช้
$('#elementID').text()
โค้ดด้านล่างช่วยให้คุณสามารถเก็บแท็ก html บางส่วนในขณะที่ลอกแท็กอื่น ๆ ทั้งหมด
function strip_tags(input, allowed) {
allowed = (((allowed || '') + '')
.toLowerCase()
.match(/<[a-z][a-z0-9]*>/g) || [])
.join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '')
.replace(tags, function($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
phpjs
) หากคุณใช้allowed
พารามิเตอร์คุณมีความเสี่ยงต่อ XSS: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')
return<p onclick="alert(1)">mytext</p>
นอกจากนี้ยังเป็นไปได้ที่จะใช้ตัวแยกวิเคราะห์htmlparser2 pure JS HTML นี่คือตัวอย่างการทำงาน:
var htmlparser = require('htmlparser2');
var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';
var result = [];
var parser = new htmlparser.Parser({
ontext: function(text){
result.push(text);
}
}, {decodeEntities: true});
parser.write(body);
parser.end();
result.join('');
ผลลัพธ์จะเป็น This is a simple example.
ดูการทำงานได้ที่นี่: https://tonicdev.com/jfahrenkrug/extract-text-from-html
สิ่งนี้ใช้ได้ทั้งในโหนดและเบราว์เซอร์ถ้าคุณแพ็คแอปพลิเคชันเว็บโดยใช้เครื่องมือเช่น webpack
ฉันแค่ต้องตัด<a>
แท็กออกและแทนที่ด้วยข้อความของลิงก์
ดูเหมือนว่าจะใช้งานได้ดี
htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');
title="..."
หลายอย่างเช่น
สำหรับวิธีแก้ปัญหาที่ง่ายกว่านี้ลองใช้ => https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
ฉันสร้างนิพจน์ปกติที่ใช้งานได้ด้วยตัวเอง:
str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, '');
2 jquery บรรทัดง่าย ๆ เพื่อตัด html
var content = "<p>checking the html source </p><p>
</p><p>with </p><p>all</p><p>the html </p><p>content</p>";
var text = $(content).text();//It gets you the plain text
console.log(text);//check the data in your console
cj("#text_area_id").val(text);//set your content to text area using text_area_id
คำตอบที่ได้รับการยอมรับนั้นใช้งานได้ดีส่วนใหญ่อย่างไรก็ตามใน IE หากคุณได้รับhtml
สตริง(แทนที่จะเป็น '') แก้ไขแล้ว:null
"null"
function strip(html)
{
if (html == null) return "";
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
ใช้ Jquery:
function stripTags() {
return $('<p></p>').html(textToEscape).text()
}
input
องค์ประกอบรองรับข้อความบรรทัดเดียวเท่านั้น :
สถานะข้อความแสดงถึงการควบคุมการแก้ไขข้อความธรรมดาหนึ่งบรรทัดสำหรับค่าขององค์ประกอบ
function stripHtml(str) {
var tmp = document.createElement('input');
tmp.value = str;
return tmp.value;
}
อัปเดต: ใช้งานได้ตามที่คาดไว้
function stripHtml(str) {
// Remove some tags
str = str.replace(/<[^>]+>/gim, '');
// Remove BB code
str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');
// Remove html and line breaks
const div = document.createElement('div');
div.innerHTML = str;
const input = document.createElement('input');
input.value = div.textContent || div.innerText || '';
return input.value;
}
(function($){
$.html2text = function(html) {
if($('#scratch_pad').length === 0) {
$('<div id="lh_scratch"></div>').appendTo('body');
}
return $('#scratch_pad').html(html).text();
};
})(jQuery);
กำหนดสิ่งนี้เป็นปลั๊กอิน jquery และใช้มันเหมือนดังต่อไปนี้:
$.html2text(htmlContent);