时间戳

首页 > 解决方案 > 如何通过 javascript 读取文本

javascript - 如何通过 javascript 读取文本

问题描述

我正在尝试创建一个小模块。我已上传.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>

标签： javascript

解决方案

嗨 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>

推荐阅读