replace string callback function in javascript

Question

I have a big html string, something like

<p>content</p>
<img src="example.jpg"/>
<p>another paragraph</p>
<a href="https://example.com/about-me.html?q=23424">about</a>
<a href="https://example.com/blog-link-1.html?q=123>blog</a>

and what I have to do is to clean the links but return the entire html string. I can use regex to do the cleaning for the link (remove after ?q=123),

const str = `<p>content</p>
<p>another paragraph</p>
<a href="https://example.com/about-me.html?q=23424">about me</a>
<br />
<a href="https://example.com/blog-link-1.html?q=123">blog</a>`
const result = str.replace(/https.*.html/g ,function(a) {
  return a //what to do here?
})
console.log(result)
$('#content').html(result)

but I failed to replace the cleaned links back into the document string.

Demo http://jsfiddle.net/ofbe3cr7/

So, you ment: Replacing just 1 link `https://example.com/blog-link-1.html?q=123` with `?q=123`? — Tân, Nov 20 '18 at 08:55
If you have access to DOM functions you should just parse the HTML and use the location object of the anchor. It's better than a common regex. https://developer.mozilla.org/en-US/docs/Web/API/Location — René, Nov 20 '18 at 09:05

score 0 · Answer 1 · answered Nov 20 '18 at 08:56

You don't need a replacer function - instead, capture the first part of the URL in a group, then match the rest of the URL with a negative character set, and then replace the entire match with the first matched group (that is, the first part of the URL):

const str = `<p>content</p>
<p>another paragraph</p>
<a href="https://example.com/about-me.html?q=23424">about me</a>
<br />
<a href="https://example.com/blog-link-1.html?q=123">blog</a>`
const result = str.replace(/(https.*?\.html)[^"]+/g, '$1')
$('#content').html(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

That said, it would be more elegant and controlled to do this with jQuery alone, and not just a regex on an HTML string: find <a>s with .find, and replace their hrefs as needed:

const str = `<p>content</p>
<p>another paragraph</p>
<a href="https://example.com/about-me.html?q=23424">about me</a>
<br />
<a href="https://example.com/blog-link-1.html?q=123">blog</a>`
const $html = $(str);
$html.find('a').each((_, a) => {
  a.href= a.href.replace(/(https.*?\.html)[^"]+/g, '$1')
});
$('#content').html($html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

I have to do this using node.js, don't think want to do it with jquery, any limitation for your first solution? anyway thanks! — Hoknimo, Nov 20 '18 at 09:09
Your code in your question used jQuery and your question made no indication that you actually couldn't use jQuery, so I thought it was OK. You could use a DOM parser for Node to implement the second solution. The first solution is inelegant and probably sometimes inaccurate, but should still work in Node, the only jQuery it's using is the part that displays the HTML — CertainPerformance, Nov 20 '18 at 09:12
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that the `https...` link is inside an `` you want to target - better to use a [proper DOM parser](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) instead — CertainPerformance, Nov 20 '18 at 20:19

replace string callback function in javascript

1 Answers1

Linked