Parse and modify an html string in JavaScript

Question

I have this string HTML. it can have many href attributes.

"<h4> TITLE </h4> <p>test</p> 
<a\r\n class=\"link\"\r\n target=\"_blank\" \r\n href=\"https://test.com\">\r\n LABEL HERE </a>.\r\n </p>\r\n     
<a\r\n class=\"link\"\r\n \r\n href=\"https://test2.com\">\r\n LABEL HERE 2 </a>.\r\n </p>\r\n"

I need to loop to every a href and modify it and return it to something like this below: add text in the label. and add target="_blank" in the href attribute if it's not there yet. Would really appreciate the help. tried many things but couldn't get this to work.

"<h4> TITLE </h4> <p>test</p>  
 <a\r\n class=\"link\"\r\n \r\n target=\"_blank\" href=\"https://test.com\">\r\n LABEL HERE (ADD TEXT HERE)</a>.\r\n </p>
 <a\r\n class=\"link\"\r\n \r\n target=\"_blank\" href=\"https://test2.com\">\r\n LABEL HERE2 (ADD TEXT HERE)</a>.\r\n </p>"

EDIT: tried this code but im getting the "expression is not callable, string has no call signatures" in the el.innerHTML code.

  let consentDataxString: string = dataFromApi?.selectedData.toString() || '';
  let el = document.createElement( 'html' )
  el.innerHTML(consentDataxString)

I'm becoming good at smelling XY problems. What problem are you trying to solve exacty in the first place? What are you originally trying to do? I suspect you have a problem X, but you don't know how to solve it, so you try some twisted and clunky method that involves modifying a string like that, but you don't know how to do it either (problem Y). So you are asking about the problem Y, which you _believe_ will solve your actual problem X, instead of the actual problem X itself. — Jeremy Thille, Oct 27 '21 at 07:41
React is not really relevant here. You need to make the individual elements accessible first; this can be done by creating a div: `const div = document.createElement('div');`. Now you can set the string as `.innerHTML`. The browser will parse it for you, which means you can now do stuff like `div.querySelector('a').innerText += " more text";` Also note that the HTML in the string is broken. Live example: https://jsfiddle.net/b0dkzxL1/ — , Oct 27 '21 at 07:46
Hi @JeremyThille , the main problem is I need to add a text in the label that says (open in new window) for screen reader for people with special needs. also sometimes the href does not have target=\"_blank\" so its opening on the same window instead of new tab. — user10860402, Oct 27 '21 at 07:46
@ChrisG , I tried this before but putting string in div.innerHTML results in an error that says "expression is not calleble, sting has no call signatures" — user10860402, Oct 27 '21 at 07:52
Please post the code you've tried. There's most likely a very basic syntax error in there. That error seems to be the result of trying to call a string as if it were a function. See the link in my edited comment above for a basic working example. — , Oct 27 '21 at 07:53
`I need to loop to every a href and modify it` Uh, no you don't, not with React. That's not how React works. In React you modify the JS data, and then the DOM gets refreshed accordingly. You don't loop over DOM elements to modify them, like with vanilla JS or jQuery. Anyway what is this long HTML string? Why a string and not DOM elements? I'm lost — Jeremy Thille, Oct 27 '21 at 07:56
`.createElement( 'html' )`?? `.innerHTML(consentDataxString)`?? That's absolutely not how React works. Really, if you are including the React library, you might as well use it :) Besides, JS does not allow to create another `` tag (`only one allowed`). Please, take some basic React courses and tutorials. — Jeremy Thille, Oct 27 '21 at 07:58
`.innerHTML` is not a function. Please look at the example code I posted: https://jsfiddle.net/b0dkzxL1/ — , Oct 27 '21 at 07:59
@JeremyThille Sorry for that, I am new to react I am a backend developer. — user10860402, Oct 27 '21 at 07:59
There's zero React anywhere in your question. You're using JavaScript so far. React is a frontend framework written in JavaScript. It's not the same thing as JavaScript. — , Oct 27 '21 at 08:00
@ChrisG yes I noticed that. my title is wrong. thank you. also trying your solution in fiddle. — user10860402, Oct 27 '21 at 08:03
Ha, so I was right, it's a XY problem. You want to do something with React, but you have no idea how, so you try to make up some string manipulation, but you have no idea how to do that either. So you ask about what you believe will solve your problem, instead of the actual problem. Your solution here, really is to spend two or three days learning React :) — Jeremy Thille, Oct 27 '21 at 08:14
@ChrisG it worked, would you like to put that as an answer so I can accept it? i also removed "document.body.append(div);" as it messes up the UI. can you tell me what its for? but thanks for the help! — user10860402, Oct 27 '21 at 08:18
Duplicate: [Parse an HTML string with JS](https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js) — , Oct 27 '21 at 08:21
That line will append the div to the document so you can actually see the result in the fiddle. Inside a React app you would do things differently. Also, not posting an answer since this is a dupe (I googled the question title and the dupe is the first result) — , Oct 27 '21 at 08:22
@JeremyThille For the record, this isn't an XY problem imo. OP is actually looking for a way to parse and manipulate a string of HTML, not some other thing. The whole React business was a red herring though :) — , Oct 27 '21 at 08:26

Parse and modify an html string in JavaScript

0 Answers0