gpt4 book ai didi

javascript - 如何通过javascript读取文本

转载 作者:行者123 更新时间:2023-11-30 19:06:54 25 4
gpt4 key购买 nike

我正在尝试创建一个小模块。我已上传 .html 文件并通过 textContent 读取该文件。现在我已经为所有链接写了一个小函数。函数名称是 linkGenerate()。但是该功能无法读取上传的文本。如果我使用 innerHTML,函数工作正常。但我不想使用它。我想以文本格式查看上传的文件,以便我可以将其保存回来。谁能告诉我如何读取上传的文件并从该文件中选择所有链接。

这是片段

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=';
}
}
}
}
<!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="#">test</a>
</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>


<!-- Custom Script
================ -->
<script src="assets/js/script.js"></script>
</body>
</html>

最佳答案

嗨,Munni,我想了解您的要求。无论我理解什么,我都实现了下面的代码片段。请检查是否符合您的要求。

无论您上传什么 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>
&copy;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>

关于javascript - 如何通过javascript读取文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58893735/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com