我正在尝试创建一个小模块。我已经上传了.html
文件,并通过textContent
读取了该文件。现在,我为所有链接编写了一个小函数。功能名称是linkGenerate()
。但是该功能无法读取上传的文本。如果我使用innerHTML
,功能正常。但我不想使用它。我想将上传的文件视为文本格式,以便可以将其保存回来。谁能告诉我如何读取上传的文件并从该文件中选择所有链接。
.html
文件在下面添加。一旦我尝试在html
文件下面上传,linkGenerate()
函数将无法读取该文件。我认为为了更好地了解您需要上传以下文件
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f4f4f4; width: 100% !important;">
<center style="width: 100% !important; background-color: #f4f4f4;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
<tbody><tr>
<td align="center" valign="top" class="">
<table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" style="margin: 0 auto;">
<!-- TEXT HEADER SECTION STARTS -->
<tbody>
<tr>
<td bgcolor="#ffffff" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 0; padding: 10px; text-align: left; vertical-align: top; word-spacing: 2px; border: 2px solid #4089c3;">
<a href="https://www.google.com/dummy0?ea=8mYoHZtET8c&elqTrackId=a3a008f9213248fe8bb899351706a6ad">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the <a href="mailto:[email protected]">industry's</a> standard dummy text ever since the 1500s, when an unknown printer took a galley of type <a href="tel:012414 258">and</a> scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="http://www.google.com/dummy1?elqTrackId=2cdd5998b5024a23b2d21839786d24a8&elqTrack=true">electronic</a> typesetting, <a href="http://www.google.com/dummy2&elqTrackId=2cdd5998b5024a23b2d21839786d24a8&elqTrack=true">remaining</a> essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently <a href="http://www.google.com/dumm3">with</a> desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
</tr>
<tr>
<td align="center" style="border-radius: 2px;padding-bottom: 15px;padding-top: 15px" class="space-change">
<table border="0" cellspacing="0" cellpadding="0" width="">
<tbody>
<tr>
<td valign="middle" bgcolor="#449E9A" align="center" class="" style="line-height: normal; vertical-align: middle;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://images.inform.janssen-emea.com/Web/JanssenPharmaceutica/{fa93572c-25a0-491c-bdd6-b777323d4b2f}_The_Clayton_Hotel__Limerick.ics"
style="height:40px; v-text-anchor:middle; width:262px; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; line-height: 39px;"
stroke="f" fillcolor="#449E9A">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://images.inform.janssen-emea.com/Web/JanssenPharmaceutica/{fa93572c-25a0-491c-bdd6-b777323d4b2f}_The_Clayton_Hotel__Limerick.ics?elqTrackId=48cc95382bb74867af4281dff7ffa583" target="_blank" style="font-size: 14px; font-family: 'Verdana',Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block; width: 262px; height: 40px; vertical-align: middle; line-height: 39px;" class="mobile-button mobile-width">
ADD TO CALENDAR
</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
这是代码段
function saveText(ref, fname, text, mime)
{
var blob = new Blob([$('#result').text()], {type: "html/plain;charset=utf-8"});
saveAs(blob, $('#fname').val() + '.html');
}
function fileValidation() {
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
var allowedExtensions = /(\.html)$/i;
if(!allowedExtensions.exec(filePath)) {
alert('Please upload file having extensions .html only.');
fileInput.value = '';
return false;
}
else {
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
var input = event.target;
reader.onload = function(){
let text = reader.result;
document.getElementById('result').textContent = text;
};
reader.readAsText(input.files[0]);
}
}
}
function linkGenerate() {
let links = result.getElementsByTagName('a').textContent;
// let links = result.getElementsByTagName('a');
// let links = result.querySelectorAll("[href]");
for(let link of links)
{
let curhref = link.href;
if(curhref.indexOf('http') > -1)
{
link.href = curhref.replace(/(\?|&)elqTrackId=[a-z0-9]+(&elqTrack=true)?/, '');
if(link.href.indexOf('ea=') > -1)
{
link.href += '&utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
}
else
{
link.href += '?utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
}
}
}
}
.form-control {
display: inline-block !important;
width: auto !important;
}
#result {
white-space: pre-wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zip</title>
<!-- Bootstrap CSS
==================== -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom Stylesheet
===================== -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Zip With Few Clicks</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" onclick="linkGenerate()">Track ID Removal<span class="sr-only">(current)</span></a>
</li>
<form onsubmit="return saveText()" class="d-flex align-items-center">
<div class="saveblock" class="pull-right">
<input id="fname" type="text" placeholder="filename" class="form-control"><span>.html</span>
<button class="btn btn-sm btn-dark" type="submit" role="button">Save</button>
</div>
</form>
</ul>
</nav>
<div class="container-fluid">
<div class="row mt-5">
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" onchange="return fileValidation()">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<!-- Output Div -->
<div id="result" contenteditable="true"></div>
</div>
</div>
</div>
<footer class="text-center bg-light pt-3 pb-2">
<p>
©All rights reserved
</p>
</footer>
<!-- jQuery CDN
=============== -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/filesaver.js/0.2/FileSaver.min.js"></script>
<!-- Custom Script
================ -->
<script src="assets/js/script.js"></script>
</body>
</html>
嗨,蒙妮,我试图了解您的要求。我所理解的我都实现了以下代码段。请检查是否满足您的要求。
它将提供所有链接,无论您上传的是什么html文档。
运行摘要后,请在控制台上检查结果。
function saveText(ref, fname, text, mime)
{
var blob = new Blob([$('#result').text()], {type: "html/plain;charset=utf-8"});
saveAs(blob, $('#fname').val() + '.html');
}
function fileValidation() {
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
var allowedExtensions = /(\.html)$/i;
if(!allowedExtensions.exec(filePath)) {
alert('Please upload file having extensions .html only.');
fileInput.value = '';
return false;
}
else {
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
var input = event.target;
reader.onload = function(){
let text = reader.result;
document.getElementById('result').textContent = text;
};
reader.readAsText(input.files[0]);
}
}
}
function linkGenerate() {
const result = document.getElementById('result'); //added
const parser = new DOMParser(),// added
dom = parser.parseFromString(result.innerText, "text/html"); //added
let myDivContent = dom.querySelector('html'); // added
let links = myDivContent.getElementsByTagName('a');
console.log(links);
for(let link of links)
{
let curhref = link.href;
if(curhref.indexOf('http') > -1)
{
link.href = curhref.replace(/(\?|&)elqTrackId=[a-z0-9]+(&elqTrack=true)?/, '');
if(link.href.indexOf('ea=') > -1)
{
link.href += '&utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
}
else
{
link.href += '?utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zip</title>
<!-- Bootstrap CSS
==================== -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom Stylesheet
===================== -->
<style>
.form-control {
display: inline-block !important;
width: auto !important;
}
#result {
white-space: pre-wrap;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Zip With Few Clicks</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" onclick="linkGenerate()">Track ID Removal<span class="sr-only">(current)</span></a>
</li>
<form onsubmit="return saveText()" class="d-flex align-items-center">
<div class="saveblock" class="pull-right">
<input id="fname" type="text" placeholder="filename" class="form-control"><span>.html</span>
<button class="btn btn-sm btn-dark" type="submit" role="button">Save</button>
</div>
</form>
</ul>
</nav>
<div class="container-fluid">
<div class="row mt-5">
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" onchange="return fileValidation()">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<!-- Output Div -->
<div id="result" contenteditable="true"></div>
</div>
</div>
</div>
<footer class="text-center bg-light pt-3 pb-2">
<p>
©All rights reserved
</p>
</footer>
<!-- jQuery CDN
=============== -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/filesaver.js/0.2/FileSaver.min.js"></script>
<!-- Custom Script
================ -->
<script src="index.js"></script>
</body>
</html>