Xóa kiểu khỏi html trực tuyến

Xóa ngay các thẻ html khỏi chuỗi nội dung bằng công cụ trực tuyến này. Nhập tất cả mã cho một trang web hoặc chỉ một phần của trang web và công cụ này sẽ tự động xóa tất cả các phần tử HTML chỉ để lại nội dung văn bản bạn muốn

Công cụ dựa trên JavaScript này cũng sẽ trích xuất văn bản cho phần tử nút HTML và thẻ meta tiêu đề bên cạnh nội dung văn bản thông thường

Nếu bạn cần xóa các thẻ HTML thì hãy thử nó - nó hoạt động khá tốt trong việc loại bỏ các phần tử HTML không mong muốn đó

Trình xóa thẻ HTML

Dán văn bản của bạn vào hộp bên dưới rồi nhấp vào nút Xóa thẻ HTML

Cách xóa thẻ HTML khỏi văn bản

Đây chỉ là một chút lưu ý kỹ thuật về việc xóa các phần tử html bằng mã JavaScript, vì vậy nếu bạn không hiểu chi tiết kỹ thuật thì chỉ cần bỏ qua phần này và sử dụng công cụ trình gỡ bỏ html ở trên

Nói chung, tốt hơn là nên sử dụng phương pháp tận dụng DOM theo cách duyên dáng để tìm và xóa nội dung HTML hơn là phương pháp chỉ sử dụng Biểu thức chính quy để tìm và xóa thẻ HTML

Bởi vì bạn sẽ gặp phải HTML không đúng định dạng, cách tiếp cận regex có thể thất bại theo những cách ngoạn mục nên ở đây tôi đã cố gắng tận dụng thuộc tính InternalText của javascript để hoàn thành công việc theo cách đáng tin cậy hơn

Vấn đề với việc sử dụng InnerText

Thật không may, việc sử dụng thuộc tính văn bản bên trong jaavscript để xóa các thẻ HTML không hoạt động chính xác như tôi muốn, vì vậy tôi phải làm dịu thỏa thuận với một số biểu thức chính quy để có được đầu ra văn bản mà tôi muốn

Đối với tôi, vấn đề lớn khi sử dụng văn bản bên trong để xóa thẻ html là nó sẽ xóa thẻ script nhưng để lại nội dung ở giữa thẻ script mở và đóng trong nội dung văn bản của bạn. Nó cũng làm tương tự đối với các thẻ kiểu trong những trường hợp mà bạn có thể gặp phải một số quy tắc kiểu trên trang.

Mặc dù là tùy chọn, nhưng tôi cũng đã thêm biểu thức chính quy để làm cho đầu ra dễ đọc hơn bằng cách loại bỏ các ngắt dòng thừa. Nó chỉ làm cho định dạng đầu ra dễ đọc hơn một chút

Dù sao đi nữa, nếu không có cái nào trong số này là công cụ giảm giá cho bạn thì tôi chỉ nói rằng hãy sử dụng thuộc tính InternalText để xóa các thẻ html khỏi nội dung web của bạn. Nếu không, bạn sẽ cần sử dụng một số biểu thức chính quy để xóa các thẻ HTML

Tôi đã gặp một yêu cầu xóa css nội tuyến khỏi microservice; . Do đó, tôi đã nghĩ đến việc viết một kịch bản thay vì thực hiện thủ công;

Tập lệnh làm gì?
1. Tập lệnh quét đệ quy tất cả các tệp html trong một thư mục
2. Đối với mỗi tệp html, nó
a. quét đệ quy phần tử 'kiểu'
b. thay thế từng thành phần kiểu bằng một lớp css ‘cx —
c. xóa phần tử kiểu dáng
3. Tất cả các lớp css đã tạo được ghi vào một tệp 'CSS đã tạo. scss’

Các bước chạy tập lệnh
1. Sao chép gói. json và RemoveInlineCSS. js vào một thư mục
2. Trong thư mục, thực hiện các lệnh
a. cài đặt npm → Điều này sẽ cài đặt tất cả các phụ thuộc cần thiết
b. npm start → Thao tác này sẽ chạy tập lệnh
3. Tập lệnh sẽ nhắc tên thư mục
4. Sau khi thực thi tập lệnh thành công, các tệp html hiện có sẽ được cập nhật và một tệp css mới sẽ được tạo tại vị trí

CẢNH BÁO
1. bưu kiện. json

{
   "name":"remove_inline_css",
   "version":"1.0.0",
   "description":"",
   "scripts":{
      "start":"node RemoveInlineCSS.js"
   },
   "author":"[email protected]",
   "license":"ISC",
   "dependencies":{
      "absurd":"⁰.3.9",
      "fs":"0.0.1-security",
      "glob":"⁷.1.4",
      "inline-style-2-json":"¹.1.0",
      "node-html-parser":"¹.1.16",
      "readline":"¹.3.0"
   }
}

2. XóaInlineCSS. js

var HTMLParser = require('node-html-parser'); // HTML parser
var absurd = require("absurd"); // CSS preprocessor
var inline_style_2_json = require("inline-style-2-json"); 
//Converts CSS inline stlyes to JSON
var fs = require('fs'); // To access file system
var glob = require('glob'); 
//Used to find all HTML files in a drectory recursivelyconst readline = require('readline');
var count = 1;
var dirname = "";
var cssFile = "";
var api = absurd(cssFile);
var callBackCounter = 0;
// accept directory path from user
const rl = readline.createInterface({
	input: process.stdin,
	output: process.stdout
});
rl.question('Enter directory path? ', (path) => {
	dirname = path;
	cssFile = `${dirname}/generatedCSS.scss`;
	console.log("read data: " + dirname);
	readFiles(dirname, compileCSS);
	rl.close();
});
var compileCSS = function (err, success) {
	api.compile(function (err, css) {
		console.log("Compiled CSS: " + css);
		fs.writeFile(cssFile, css, function () {
			console.log("CSS file written successfully");
		});
	});
};

function processFile(filename, content, cb) {
	var global = HTMLParser.parse(content, {
		style: true
	});
	if (global.childNodes.length > 0) {
		extractInlineCSS(global, true, filename, function () {
			cb();
		});
	}
}

function readFiles(dirname, cb) {
	glob(dirname + "/**/*.html", null, function (er, files) {
		files.forEach(function (file) {
			console.log(file);
			fs.readFile(file, 'utf-8', function (err, content) {
				if (err) {
					return;
				}
				processFile(file, content, function () {
					callBackCounter++;
					if (callBackCounter == files.length) {
						cb();
					}
				});
			});
		});
	});
}

function extractInlineCSS(parentNode, isRoot, filename, cb) {
	for (let i = 0; i < parentNode.childNodes.length; i++) {
		var childNode = parentNode.childNodes[i];
		if (childNode.attributes != undefined && childNode.attributes.style != undefined) {
			console.log("***" + childNode.attributes.style);
			let styleJsonObj = inline_style_2_json(childNode.attributes.style);
			let htmlClassName = "cx - " + childNode.tagName + "_" + count;
			let cssClassName = ".cx - " + childNode.tagName + "_" + count++;
			let style = {
				[cssClassName]: styleJsonObj
			};
			api.add(style);
			// if a given node already has a class attribute
			if (childNode.attributes.class != undefined) {
				let newClasses = childNode.attributes.class + " " + htmlClassName;
				childNode.attributes.class = newClasses;
				childNode.rawAttributes.class = newClasses;
			}
			// A given node doesn't have a class attribute
			else {
				childNode.attributes.class = htmlClassName;
				childNode.rawAttributes.class = htmlClassName;
			}
			delete childNode.attributes.style;
			var str = '';
			let updatedAttributes = childNode.attributes;
			for (let i = 0; i < Object.keys(updatedAttributes).length; i++) {
				str += `${Object.keys(updatedAttributes)[i]}="${updatedAttributes[Object.keys(updatedAttributes)[i]]}" `;
			}
			childNode.rawAttrs = str;
			// console.log(`class ` + childNode.attributes.class);
			// console.log(`updated html: ` + parentNode.toString());
		}
		if (childNode.childNodes.length > 0) {
			extractInlineCSS(childNode, false, filename, cb);
		}
	};
	if (isRoot) {
		fs.writeFile(filename, parentNode.toString(), function (err) {
			if (!err) {
				console.log(`${filename} has been updated successfully.`);
				cb();
			}
		});
	}
}

3. HTML kiểm tra mẫu — TestFile. html

   
       
      
I am red

       
      

          I am red again
          
         

             I am blue
             
            

                I am yellow
                
            

             
         

          
         
I am big

          
      

   

4. đầu ra

tập tin kiểm tra. html

   
       
      
I am red

       
      

          I am red again
          
         

             I am blue
             
            

                I am yellow
                
            

             
         

          
         
I am big

          
      

   

CSS đã tạo. scss

.cx - p_1, .cx - div_2 {
 color: red;
}
.cx - div_3 {
 color: blue;
}
.cx - p_4 {
 color: yellow;
}
.cx - p_5 {
 font-size: 50px;
}

Hạn chế
Tập lệnh loại bỏ mọi nhận xét và

Tái bút. Tập lệnh được viết cách đây khoảng 2 năm, do đó chúng tôi có thể cần nâng cấp các phiên bản thư viện và tập lệnh có thể được cải tiến bằng cách sử dụng ES6 async/await