How to read text via javascript

Question

I am trying to create a small module. I have uploaded .html file and read that file via textContent. Now I have written a small function for all links. Function name is linkGenerate(). But that function can't read the uploaded text. Function works fine if i use innerHTML. But I don't want to use it. I want to see the uploaded file as a text format so that I can save it back. can anyone tell me how can i read uploaded file and select all links from the that file.

Here is the snippet

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>

It is hard to understand your wish. What you are doing now seems to be what you should do. What do you mean by But I don't want to use it. I want to see the uploaded file as a text format so that I can save it back What do you need to modify before saving that you cannot do by treating the file as HTML? — mplungjan
– mplungjan, Commented Nov 16, 2019 at 18:16
I wanted to get all links from the uploaded file and wanted to replace with new links — Munni
– Munni, Commented Nov 16, 2019 at 18:22
result is the div where I have shown the uploaded file @trincot — Munni
– Munni, Commented Nov 16, 2019 at 18:24
Can you embed a snippet (not a link to another site please) that defines that result variable and that illustrates the problem? — trincot
– trincot, Commented Nov 16, 2019 at 18:26

Atul Kumar · Accepted Answer · 2019-11-16 20:33:08Z

Hi Munni i trying to understand you requirement. whatever i understand i implements bellow code snippet. please check is it your requirement.

it will provide all links whatever html document you uploaded.

after running snippet kindly check result on console.

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>

Collectives™ on Stack Overflow

How to read text via javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related