Replace anchor tags with spans, and place the href attribute into the span
up vote
4
down vote
favorite
I'm required to perform a slight conversion on a string which contains html.
The conversion should transform a elements such that they become span elements. The conversion should also place the href attribute from the original a element into the span.
I have what I think is a working solution, but the code feels overcomplicated. I had hoped this may be possible with relatively little code, so I was wondering if anyone could suggest ways to make this code neater.
Browser compatibility is not an issue, as this will be transpiled by babel.
Here's what I have:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultEdit
I should note that the solution ought to work in node, ideally. I appreciate that the fact I include dom manipulation in the question is quite misleading, I included this more to attempt to create an easy working example that to demonstrate how the code might actually be used.
javascript html
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
4
down vote
favorite
I'm required to perform a slight conversion on a string which contains html.
The conversion should transform a elements such that they become span elements. The conversion should also place the href attribute from the original a element into the span.
I have what I think is a working solution, but the code feels overcomplicated. I had hoped this may be possible with relatively little code, so I was wondering if anyone could suggest ways to make this code neater.
Browser compatibility is not an issue, as this will be transpiled by babel.
Here's what I have:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultEdit
I should note that the solution ought to work in node, ideally. I appreciate that the fact I include dom manipulation in the question is quite misleading, I included this more to attempt to create an easy working example that to demonstrate how the code might actually be used.
javascript html
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago
add a comment |
up vote
4
down vote
favorite
up vote
4
down vote
favorite
I'm required to perform a slight conversion on a string which contains html.
The conversion should transform a elements such that they become span elements. The conversion should also place the href attribute from the original a element into the span.
I have what I think is a working solution, but the code feels overcomplicated. I had hoped this may be possible with relatively little code, so I was wondering if anyone could suggest ways to make this code neater.
Browser compatibility is not an issue, as this will be transpiled by babel.
Here's what I have:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultEdit
I should note that the solution ought to work in node, ideally. I appreciate that the fact I include dom manipulation in the question is quite misleading, I included this more to attempt to create an easy working example that to demonstrate how the code might actually be used.
javascript html
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I'm required to perform a slight conversion on a string which contains html.
The conversion should transform a elements such that they become span elements. The conversion should also place the href attribute from the original a element into the span.
I have what I think is a working solution, but the code feels overcomplicated. I had hoped this may be possible with relatively little code, so I was wondering if anyone could suggest ways to make this code neater.
Browser compatibility is not an issue, as this will be transpiled by babel.
Here's what I have:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultEdit
I should note that the solution ought to work in node, ideally. I appreciate that the fact I include dom manipulation in the question is quite misleading, I included this more to attempt to create an easy working example that to demonstrate how the code might actually be used.
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultconst testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`
const splitByLinkEnds = html => {
const split = html.split('</a>')
const allButLast = split.slice(0, -1)
const last = split.slice(-1)[0]
return [
...allButLast.map(x => `${x}</a>`),
last
]
}
const splitByLinks = html => {
const split = html.split('<a');
const [
first,
...result
] = split
const withReaddedOpeningTags = [
first,
...result.map(x => `<a${x}`)
]
return withReaddedOpeningTags
.reduce((prev, curr) => [
...prev,
curr.indexOf('<a') > -1 ?
splitByLinkEnds(curr) : curr
], ).flat()
}
const transformLinkToTextOnly = linkHtml => {
const linkHref = linkHtml
.match('href="[^"]*"')[0]
.replace('href="', '')
.replace('"', '')
const htmlWithSpan = linkHtml
.replace('<a', '<span')
.replace('</a>', '')
return `${htmlWithSpan} (${linkHref})</span>`
}
const transformLinksToTextOnly = html =>
splitByLinks(html)
.map(x => x.indexOf('<a') > - 1 ?
transformLinkToTextOnly(x) : x
).join('')
const result = transformLinksToTextOnly(testHtml)
document.body.innerHTML += testHtml
document.body.innerHTML += '<hr />'
document.body.innerHTML += resultjavascript html
javascript html
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 8 hours ago
asked 12 hours ago
OliverRadini
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 12 hours ago
OliverRadini
1213
asked 12 hours ago
OliverRadini
1213
1213
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
OliverRadini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago
add a comment |
1
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago
1
1
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
3
down vote
One thing to consider is the whole working with HTML as string. In the answer I'll assume you work within the web-browser. The web-browser can parse the HTML for you, this way you'll only have to work with nodes.
Here is an example:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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
});
}
});
OliverRadini is a new contributor. Be nice, and check out our Code of Conduct.
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%2fcodereview.stackexchange.com%2fquestions%2f209609%2freplace-anchor-tags-with-spans-and-place-the-href-attribute-into-the-span%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
up vote
3
down vote
One thing to consider is the whole working with HTML as string. In the answer I'll assume you work within the web-browser. The web-browser can parse the HTML for you, this way you'll only have to work with nodes.
Here is an example:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
add a comment |
up vote
3
down vote
One thing to consider is the whole working with HTML as string. In the answer I'll assume you work within the web-browser. The web-browser can parse the HTML for you, this way you'll only have to work with nodes.
Here is an example:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
add a comment |
up vote
3
down vote
up vote
3
down vote
One thing to consider is the whole working with HTML as string. In the answer I'll assume you work within the web-browser. The web-browser can parse the HTML for you, this way you'll only have to work with nodes.
Here is an example:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
One thing to consider is the whole working with HTML as string. In the answer I'll assume you work within the web-browser. The web-browser can parse the HTML for you, this way you'll only have to work with nodes.
Here is an example:
const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;const testHtml = `
<p>This is a test paragraph</p>
<a style="font-weight: bold;" href="http://www.google.co.uk">Google is here</a>
<a style="font-weight: bold;" href="http://www.msn.co.uk">Msn is here</a>
<h2>This is a heading</h2>
`;
function transformLinksToTextOnly(htmlString) {
const root = document.createElement('root');
root.innerHTML = htmlString;
const anchors = root.querySelectorAll('a');
anchors.forEach(anchor => {
const span = document.createElement('span');
span.innerHTML = anchor.innerHTML;
if (anchor.href)
span.innerHTML += ` (${anchor.href})`;
anchor
.getAttributeNames()
.forEach(attrName => {
const attrValue = anchor.getAttribute(attrName);
span.setAttribute(attrName, attrValue);
});
anchor.parentNode.replaceChild(span, anchor);
});
return root.innerHTML;
}
const result = transformLinksToTextOnly(testHtml);
document.body.innerHTML += testHtml;
document.body.innerHTML += '<hr />';
document.body.innerHTML += result;answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 7 hours ago
answered 9 hours ago
Johan Wentholt
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 9 hours ago
Johan Wentholt
1313
answered 9 hours ago
Johan Wentholt
1313
1313
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Johan Wentholt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
add a comment |
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
Thanks for this; I was actually thinking of using this in node, which I should have probably mentioned in the question, but it may be that I can take a similar approach using a library
– OliverRadini
9 hours ago
add a comment |
OliverRadini is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
OliverRadini is a new contributor. Be nice, and check out our Code of Conduct.
OliverRadini is a new contributor. Be nice, and check out our Code of Conduct.
OliverRadini is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2fcodereview.stackexchange.com%2fquestions%2f209609%2freplace-anchor-tags-with-spans-and-place-the-href-attribute-into-the-span%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
1
Thanks for this great question - I hope you get some good reviews, and I hope to see more of your contributions here in future!
– Toby Speight
11 hours ago