Change start tag and end tag separately

Question

I need to replace the flowing:

<a href="#">something</a>

withthis:

(start-a)something(end-a)

I do not master the regex well, so the regex I have its just to change all tags completely.

string.replace(/(<([^>]+)>)/ig,"(start-a)");

Whats should I change in my regex for just replacing the first tag, and the other change to replace the ending tag?

Thanks.

You should use DOM methods instead of regex. [obligatory canonical link](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#1732454) — Daniel Beck, Nov 30 '17 at 21:36
https://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript — Daniel Beck, Nov 30 '17 at 21:38
@DanielBeck, well, such example is for changing from one tag to another. but I need to do it in a string not in DOM. — domoindal, Nov 30 '17 at 21:41
Are you doing this in a browser or in another environment like node.js? — charlietfl, Nov 30 '17 at 21:42
Convert your string into a DOM object and work with that. Seriously, regex is the wrong tool for manipulating HTML. — Daniel Beck, Nov 30 '17 at 21:42
@revo The real input is a string (like shown) and the output a string too. Not for DOM. — domoindal, Nov 30 '17 at 21:43
@revo string A = "something" and I need B = "(start-a)something(end-a)" — domoindal, Nov 30 '17 at 21:45
Please show enough of your "*[mcve]*" code so that we have some chance of reproducing your problem, also: read the "*[ask]*" (and "['runnable snippet'](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)") guidelines. Where is the input string coming from? When, or how, do you expect to encounter, and modify, it? — David Thomas, Nov 30 '17 at 21:45
Okay then do `A.replace('', '(start-a)').replace('', '(end-a)')`~ — revo, Nov 30 '17 at 21:47
@revo, well, what if the case that href has not #? I need a general case for changing all — domoindal, Nov 30 '17 at 21:49
That's why I asked a question which you didn't answer. Your requirements are not clear. Which tags are allowed to be treated? — revo, Nov 30 '17 at 21:52

score 1 · Accepted Answer · answered Nov 30 '17 at 21:51

Find all the tags you wish to replace.
Create a new text node based on each tag.
Insert new node.
Delete old tag.

// Find all tags to be replaced and put in an Array and loop through them
var tags = Array.prototype.slice.call(document.querySelectorAll("a")).forEach(function(tag){
  // Find the parent element of the node
  var parent = tag.parentNode;
  
  // Create a new text node with the contents of the current element
  var replaceString = document.createTextNode("(start-a)" + tag.textContent + "(end-a)");
  
  // Insert the new text node where the current tag is
  parent.insertBefore(replaceString, tag);
  
  // Delete the old tag
  parent.removeChild(tag);
});

<div>
  <a href="#">something</a>
  <a href="#">something</a>
  <a href="#">something</a>
  <a href="#">something</a>
  <a href="#">something</a>
</div>

FYI can use `document.querySelectorAll("a").forEach` without slice.call — charlietfl, Nov 30 '17 at 21:54
@charlietfl Actually, no, you can't [in all browsers](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach). (IE any, Android). — Scott Marcus, Nov 30 '17 at 22:00
yup...figures with IE...always 3 steps behind although there is polyfill for it — charlietfl, Nov 30 '17 at 22:03

Change start tag and end tag separately

1 Answers1