How to use javascript to find and replace a word split in a few tags?
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
javascript html node.js
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
add a comment |
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
javascript html node.js
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
2
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55
add a comment |
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
javascript html node.js
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
javascript html node.js
javascript html node.js
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
edited Dec 31 '18 at 13:51
SuperBerry
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
asked Dec 31 '18 at 13:02
SuperBerrySuperBerry
335116
335116
2
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55
add a comment |
2
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55
2
2
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55
add a comment |
2 Answers
2
active
oldest
votes
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
add a comment |
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
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
});
}
});
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%2f53987837%2fhow-to-use-javascript-to-find-and-replace-a-word-split-in-a-few-tags%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
add a comment |
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
add a comment |
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
answered Dec 31 '18 at 13:27
Usman MaqboolUsman Maqbool
162
162
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
add a comment |
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
Thank you for your help. The whole content is much more complex with more tags, not only <span>... Is there a way to replace only text but keep the original tag format?
– SuperBerry
Dec 31 '18 at 13:50
add a comment |
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
add a comment |
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
add a comment |
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
answered Dec 31 '18 at 14:57
TarreqTarreq
553212
553212
add a comment |
add a comment |
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.
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%2f53987837%2fhow-to-use-javascript-to-find-and-replace-a-word-split-in-a-few-tags%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
2
Yes, but you need to be clear about what html you expect to end up with. The problem is because you read html, so you get all the tags. You can read just the text, but doing so will remove all the html tags when it replaces the 2nd apple.
– Archer
Dec 31 '18 at 13:05
I want to replace the word and keep the tag format same. The content could be much more complex with more tags, not only <span>...
– SuperBerry
Dec 31 '18 at 13:48
How do you define "the same format"? In your example, the first and second letter are wrapped in spans, while the remaining 3 letters are in one span. The replacement, "pear", doesn't have the same number of letters, so the best you can do is put spans around the first and second letters, and "the rest" will have one span. But that's not a consistent format, so chances are you don't want to hard-code it into your replacement. Without a consistent definition of the format you want to end up with, you can't do the replacement automatically.
– IceMetalPunk
Dec 31 '18 at 18:55