Mixing
replace string callback function in javascript
0
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/
javascript
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
add a comment |
0
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/
javascript
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
So, you ment: Replacing just 1 linkhttps://example.com/blog-link-1.html?q=123with?q=123?
– Foo
Nov 20 '18 at 8: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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05
add a comment |
0
0
0
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/
javascript
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
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/
javascript
javascript
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
asked Nov 20 '18 at 8:50
HoknimoHoknimo
917
917
So, you ment: Replacing just 1 linkhttps://example.com/blog-link-1.html?q=123with?q=123?
– Foo
Nov 20 '18 at 8: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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05
add a comment |
So, you ment: Replacing just 1 linkhttps://example.com/blog-link-1.html?q=123with?q=123?
– Foo
Nov 20 '18 at 8: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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05
So, you ment: Replacing just 1 link
https://example.com/blog-link-1.html?q=123 with ?q=123?– Foo
Nov 20 '18 at 8:55
So, you ment: Replacing just 1 link
https://example.com/blog-link-1.html?q=123 with ?q=123?– Foo
Nov 20 '18 at 8: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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05
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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05
add a comment |
1 Answer
1
active
oldest
votes
0
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>answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
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 9: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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that thehttps...link is inside an<a>you want to target - better to use a proper DOM parser instead
– CertainPerformance
Nov 20 '18 at 20:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389262%2freplace-string-callback-function-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
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 9: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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that thehttps...link is inside an<a>you want to target - better to use a proper DOM parser instead
– CertainPerformance
Nov 20 '18 at 20:19
add a comment |
0
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>answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
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 9: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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that thehttps...link is inside an<a>you want to target - better to use a proper DOM parser instead
– CertainPerformance
Nov 20 '18 at 20:19
add a comment |
0
0
0
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>answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
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>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>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>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>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>answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
answered Nov 20 '18 at 8:56
CertainPerformanceCertainPerformance
80.8k143865
80.8k143865
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 9: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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that thehttps...link is inside an<a>you want to target - better to use a proper DOM parser instead
– CertainPerformance
Nov 20 '18 at 20:19
add a comment |
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 9: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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
Regular expressions in general aren't very reliable at parsing HTML. In this case, there's nothing that guarantees that thehttps...link is inside an<a>you want to target - better to use a proper DOM parser instead
– CertainPerformance
Nov 20 '18 at 20:19
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 9:09
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 9: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 9:12
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 9:12
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
why sometimes inaccurate?
– Hoknimo
Nov 20 '18 at 12:46
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 <a> you want to target - better to use a proper DOM parser instead– CertainPerformance
Nov 20 '18 at 20:19
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 <a> you want to target - better to use a proper DOM parser instead– CertainPerformance
Nov 20 '18 at 20:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389262%2freplace-string-callback-function-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So, you ment: Replacing just 1 link
https://example.com/blog-link-1.html?q=123with?q=123?– Foo
Nov 20 '18 at 8: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. developer.mozilla.org/en-US/docs/Web/API/Location
– René
Nov 20 '18 at 9:05